Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Check if new item is added to the multifield

Shaheena_Sheikh
Level 4
Level 4

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.

 

1 Accepted Solution
Anudeep_Garnepudi
Correct answer by
Community Advisor
Community Advisor

@Shaheena_Sheikh 

try the below code

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

 

View solution in original post

9 Replies
Shaheena_Sheikh
Level 4
Level 4

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

asutosh_jena
Community Advisor
Community Advisor

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
Level 4
Level 4
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
Community Advisor
Community Advisor

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);
Anudeep_Garnepudi
Correct answer by
Community Advisor
Community Advisor

@Shaheena_Sheikh 

try the below code

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

 

View solution in original post

Shaheena_Sheikh
Level 4
Level 4
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");})