button click event triggering wrong event handler - javascript

I have a div display some titles of music which is clickable. When you click it it will show some more detail information. Then I also have a button in the clickable div. When I click the button. It won't call the function of the button but the function of the div? Is there a way to solve this? Thank you!
$("#myComList").append("<div id="+comListID+" class=listDiv> <p class=comTitle><? echo $row["compositionTitle"] ?>(<?echo $row["year"]?>)</p><button id="+comListID+"btn class=addNewArrBtn>Add new Arrangement</button> <p class=comOri>BY <? echo $row["OrigComposer"] ?></p> </div>");
$('#'+comListID).click(function() {
$(this).find("li").slideToggle('slow', function() {
});
$("#"+comListID+"btn").click(function(){
addNewArr(comListID);
});

It's called 'bubbling'. The button is inside the div so it's executing button then up the chain to div. Add event.stopPropagation() inside the button function.
$("#"+comListID+"btn").click(function(event){
event.stopPropagation();
addNewArr(comListID);
});

From jQuery documentation:
By default, most events bubble up from the original event target to
the document element. At each element along the way,
jQuery calls any matching event handlers that have been attached.
A handler can prevent the event from bubbling further up the document
tree (and thus prevent handlers on those elements from running) by
calling event.stopPropagation(). Any other handlers attached on the
current element will run however. To prevent that, call
event.stopImmediatePropagation(). (Event handlers bound to an element
are called in the same order that they were bound.)
http://api.jquery.com/on/
So you'd call event.stopPropagation() inside the button click handler, as to stop the div event from firing.

I believe I understand your question without seeing the code. The problem it sounds like stems from the click event bubbling or propagating up. Below is a sample of code to try and a link to a fiddle for you to test:
<div id="testDiv" onclick="alert('Stop Clicking Me!');">
<button type="button" onclick="function(e) { alert('You hit the button!'); e.stopPropagation(); }">Click Me!</button>
</div>
In this function, the:
e.stopPropagation();
prevents the click event from filtering up to its parent container (in this case "testDiv") and triggering its click event as well. You can test it and see for yourself in the jsfiddle below:
Test Fiddle
EDIT:
In your case:
$("#"+comListID+"btn").click(function(e){
addNewArr(comListID);
e.stopPropagation();
});
add the event parameter to the click function and stop it from propagating to the parent.
Hope this helps.

Related

Button inside a span, both have an event. If I click the button, the span event also starts

<span onClick={'event example 1'}>
content example 1
<button onClick={'event example 1'}>
content example 2
</button>
</span>
How can I press the button without also involving the span event? It's possible?
Working example. you have to bind event to get access to stop event.stopPropagation()
function spanFunction(e) {
console.log('spanFunction')
}
function buttonFunction(event) {
event.stopPropagation()
console.log('buttonFunction')
}
<span onClick="spanFunction(event)">
content example 1
<button onClick="buttonFunction(event)">
content example 2
</button>
</span>
there are two extra properties to handle this issue:
event.preventDefault is to prevent the default action of the
element.
event.stopPropagation is to stop the event from propagating
upwards.
In your handler specify first attribute - event and in html bind the function with event. In this case you need to use stopPropagation.
onClick(function(event){
event.stopPropagation();
console.log('button element');
});
Events bubble by default. So the target is the element that triggered the event (e.g., the user clicked on).
If u face some ambiguity while stopping the event bubbling via stopPropogation(preferred) u can this structure.
// Dont forget to pass event (e).
if (e.tagName.toLowerCase() === 'button') {
conosole.log('CLICK');
}

How do I avoid one 'click' that triggers two functions?

Hi I have two JS functions:
$('button').click(function() inside $(document).ready
$(document).on('click','button', function()
the second function is design for buttons that I dynamically generated.
The problem I have is that when I click the button that associates with first function, the second function also gets triggered. How can I avoid this?
PS: since I give names to each button and this conflict is not affecting functionalities at all, but I think that one click trigger two function is not very smart :(
That is because of event propagation.
You can stop the event propagation in the first handler to prevent the dynamic handler from being fired.
$('button').click(function (e) {
e.stopPropagation();
//your code
})
But a more appropriate solution will be to add a common class to all the dynamic button elements and target only them with the delegated handler like
<button class="mydynamic"></button>
then
$(document).on('click','button.mydynamic', function(){
});
You can find documentation for event.stopPropagation() here
Wrap your dynamicly generated buttons into a div:
<div class="wrap">...buttons... </div>
and listen on the div:
$('.wrap').on('click','button', function(){});
It will be more efficent.

Catching click event while delete thumbnail

I slightly modified FU thumbnail template to hook a click event on it. I also display a delete button (the provided one).
The problem is that when I click on the delete button, the click event bubbles to the rest of the javascript stack.
How can I prevent the delete button to propagate the click event??
(usually you do something like event.stopPropagation()...).
Thanks for your help
If you'd like to prevent any DOM event from bubbling, simply attach an event handler to the element where you would like it to terminate and call stopPropagation() on the Event object. For example, for a click event:
someElement.addEventListener('click', function(event) {
event.stopPropagation();
});
The above code will not work in IE8 and older since addEventListener and stopPropagation were first introduced in IE9.

How can I find out where a click event gets caught?

I am working on a very complex website and i have a piece of HTML on the page inside which no button is clickable. I think the click event gets caught somewhere so that the click handlers of the buttons do not fire.
How can I find out where those click events gets caught?
Add a click event listener to the document, and see what's catching the event:
document.addEventListener('click',function(e){
console.log(e.target);
})
Just check the event.target of the click event to see where it is.
There should be a document.click() or document.live("click",...) handler somewhere in the javascript included in the page, which returns false.

Issue regarding live event

I was just reading http://api.jquery.com/event.stopPropagation/
Since the .live() method handles
events once they have propagated to
the top of the document, it is not
possible to stop propagation of live
events
I was a bit confused with this statement, Can someone please explain me the same with some example?
Live method binds a handler to the document, and identifies which element triggered the event from the event.target property.
So the actual handler is at the top (in terms of hierarchy).
The stopPropagation stops the bubbling from going up the DOM hierarchy, but since the handler is at the top already (in the .live case) there is no upper place to bubble to ..
example attempt ..
- document
- div
- link
you bind a click event handler to the link (with the bind or click method).
When you click the link, the handler is triggered, but in addition the click event goes up the DOM until it reaches the document, and will also trigger click handlers bound to the div and document. (unless you use the .stopPropagation)
Alternatively if you use the .live method to bind the event handler, it will be bound to the document. If you now click the link, the event (which will not fire right away, since no handler is bound to it) will naturally go up the DOM (triggering the click handlers it encounters). Once it reaches the document it will trigger our own handler. But there is no upper to go, so the stopPropagation is useless at this point.
HTML:
<div id="outer">
<div id="inner">
<span>.live() version</span>
</div>
</div>
<div id="outer2">
<div id="inner2">
<span>.delegate() version</span>
</div>
</div>
JS:
$(function(){
$('#inner2').delegate('span', 'click', function(e){
e.stopPropagation(); // indeed, no alert!
});
$('span').live('click', function(e){
e.stopPropagation();
// we would expect the propagation to stop here, so no alert, right?
});
$('#outer2, #outer').click(function(){ alert("Don't reach me!"); });
});
Example: http://jsfiddle.net/knr3v/2/
.live() only does its magic once the event has already bubbled, so stopping the event from propagating is useless - it's too late, it has already reached the top of the tree and propagated...

Categories