Loop not working for multifield

Question

$(".coral3-Multifield-item").each(function( index ) {}

this loop is not working for the newly added items.

$("coral-multifield").children("button[coral-multifield-add]").on("click", function() {

$(".coral3-Multifield-item").each(function( index ) {
console.log("add item");

})});

if I already have 2 items in my multifield when I open the dialog, then the above console log prints 2 times. Now if I Add a new item to the multifield (3rd item), the console log still works for the first 2 items only, though it should have worked for 3 times.

log:

add item

Now if I add another item (4th item), then the log shows 3 times and twice but doesnt show for the 4th item:

add item

Now if I save my dialog changes (total item=4) and open the dialog again, and Add a new item, this time console log prints 4 times and doesn't print for the the 5th item.

add item

If there are no items when I open the dialog, and I add a new item, then the log doesn't print at all.

I need the run the loop everytime a new item is added.

Asutosh_Jena_ · Accepted Answer

Hi @shaheena_sheikh

Adding the below code will execute only on button click and the loop also works as expected. This will run each time a new item is added i.e. each time you click on add button.

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

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

        //Code from here
        $(".coral3-Multifield-item").each(function (index) {
            console.log("add item");
        })
    });

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

Hope this helps!

Thanks!

Kiran_Vedantam · Answer

Hi @shaheena_sheikh, What are you trying to do with the multifield? It is recommended to use Models to handle the business logic. Thanks,Kiran Vedantam.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded