JQuery detects click interactions on nested elements causing huge loop
Trying to add a click event to a button nested between multiple elements (ul, div.col, li, div.panel, div.panel-body). I can access it with the code below, however, as if I clicked on the page more than a few times, then console.logs starts looping and executes thousands of times .
I'm pretty sure this is a nesting of functions that call this. But jQuery doesn't have enough background to be able to tell exactly what the browser is doing.
Here is my JQuery code:
$('#displayList #col1').click(function(){
console.log('clicked col');
$('li').click(function(){
var id = $(this).attr('id');
console.log(id);
$('div.panel').click(function(){
console.log('clicked panel');
$('div.panel-body').click(function(){
console.log('clicked panel body');
$('button').click(function(){
console.log('clicked button');
return;
});
return;
});
return;
});
return;
});
return;
});
Perhaps one of you amazing jQuery guru explains what is causing this error and point me to the best way to check if the button was clicked or not (just clicked the panel).
Also, does anyone know of a good and preferably free debugging program that I can use to get my jQuery code executed by execution?
Thank you so much for your knowledge
source to share
You bind an event handler inside another event handler. Therefore, whenever a later event occurs, new handlers are added, eventually calling multiple handlers for the same event on the same element.
Your code should look something like this:
$('#displayList #col1').click(function(){
console.log('clicked col');
});
$('li').click(function(){
var id = $(this).attr('id');
console.log(id);
});
$('div.panel').click(function(){
console.log('clicked panel');
});
$('div.panel-body').click(function(){
console.log('clicked panel body');
});
$('button').click(function(){
// The following will be executed when the button is clicked
console.log('clicked button');
});
Let's assume you have the following markup:
<div id="container>
<div id="parent">
<button>Click Me!</button>
</div>
</div>
And event handlers:
$("#container").click(function(){
console.log("container got a click!");
});
$("#parent").click(function(){
console.log("parent got a click!");
});
$("#parent button").click(function(){
console.log("button got a click!");
});
Now if you press the button, there will be
//button got a click!
//parent got a click!
//container got a click!
When you click on an element, all of its ancestors will also receive a default click event, and the corresponding call will be called if there is one - this is called event bubbling. If you don't need any specific functionality, you don't need a handler, so bubling doesn't hurt.
However, you can prevent this behavior by calling the stopPropagation()
event object method inside the event handler:
$("#parent button").click(function(e){
e.stopPropagation();
console.log("button got a click!");
});
the output will be
//button got a click!
In some browsers there is another method of event propagation (for all major browsers only the event bubbling model is supported), you can read about it in detail @ quirksmore: Ordering an event
Like the DFTR mentioned in the comments,
Visual studio allows you to intercept javascript code when launching an application in Internet explorer. Another debugging tool is firebug, which is a pretty neat firefox extension.
source to share
You can help you.
if you need to bind an event to a button you must use a descendant selector
$('#displayList #col1 li div.panel div.panel-body button').click(function() {
console.log('clicked button');
});
source to share