Check if new item is added to the multifield

[Shaheena_Sheikh]

I want to call a JS function when a new item is added to the multifield. I have tried: 

$(".cq-dialog").find("coral3-Button coral3-Button--secondary").on("click", funcName);

doesn't call my function.

[Shaheena_Sheikh]

my func is getting triggered when i am opening the dialog. Not when i click on the Add button

[Asutosh_Jena_]

Hi @Shaheena_Sheikh 

Please try the below code and it will work.

(function (document, $, ns) {
    "use strict";

    $(document).on("click", ".coral3-Button--secondary", function (e) {
        e.stopPropagation();
        e.preventDefault();
        alert("Hi");
    });

})(document, Granite.$, Granite.author);

[Shaheena_Sheikh]

this works but has a problem. The alert gets kicked even if i click on a dropdown, colorfield swatch (these are also within multifield items) etc. that should only get triggered for the click event of Add button

[Asutosh_Jena_]

Hi @Shaheena_Sheikh 

Targeted only the button element below. Should work now.

(function (document, $, ns) {
    "use strict";

    $(document).on("click", "button[coral-multifield-add]", function (e) {
        e.stopPropagation();
        e.preventDefault();
        alert("Hi");
    });

})(document, Granite.$, Granite.author);

[Shaheena_Sheikh]

thanks, it works!

[Asutosh_Jena_]

Sounds good!

[Anudeep_Garnepudi · Accepted solution]

@Shaheena_Sheikh 

try the below code

$(document).on("dialog-ready", function(){
	$("coral-multifield").children("button[coral-multifield-add]").on("click", function() {
		//Logic
	});
});

[Shaheena_Sheikh]

thanks, it works!

[Shaheena_Sheikh]

if i add a loop in place of login, the loop never works for the newly added item. $(".coral3-Multifield-item").each(function (index) {console.log("add item");})