I can stop normal inks from working with this:
$('#container a').click(function(event) {
return false;
});
However my site has existing javascript that fires when a link is clicked. The code above doenst stop these from firing.
You may unbind click and stopPropagation
$('#container a').unbind('click').click(function(event) {
event.stopPropagation();
//event.preventDefault();
return false;
});
if the other click events are bound with jquery, as long as this event is bound after those you should be able to do:
$('#container a').off('click').on('click', function(event) {
return false;
});
the .off will remove previously bound click event before binding the new
one
(off is unbind for events added with on)
You can unbind event from selected elements http://api.jquery.com/unbind/
$('#container a').unbind("click");
You need to use event.stopImmediatePropagation() and .off() it removes event handlers.
Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.
$('#container a').off('click').on('click', function(event) {
event.stopImmediatePropagation();
event.stopPropagation();
});
A bit of an aside, but this can also be done with CSS
pointer-events: none
Related
$('a').click(function() {
_link = $(this).attr('href');
loadContent(_link);
return false;
});
function loadContent(href){
$('#content').load(href + ' #content > *)
}
I have all <a> binded with a .click() that will only change the contents of #content. However, new <a> from the new #content arent working with the previous .click() function. How can I rebind it?
Adding the function again after the .load() seems to work
function loadContent(href){
$('#content').load(href + ' #content > *);
$('a').click(function() {
_link = $(this).attr('href');
loadContent(_link);
return false;
});
}
But would this mess up the `s' that were already binded and cause it to run it on a loop?
Use event delegation to bind events to dynamically added elements (in this case as):
$(document).on('click', 'a', function() {
_link = $(this).attr('href');
loadContent(_link);
return false;
});
Event delegation works by listening for events bubbling up to a non-changing ancestor (document is the best default if none is handy, do not use 'body' as it has click bugs relating to styling). It then applies the jQuery selector to the elements in the bubble chain, it then applies your function to the matching element(s) that caused the event. The advantage is that the elements only need to exist at event time and now when the handler was registered.
When you initially add the click event listener, it is only bound to the existing anchor tags. The code to bind the event listener is run once and does not run again for any new anchor tags.
You can try attaching a listener to the body for click events on any anchor tags.
$('body').on('click', 'a', function() {...});
Im having some problems with .on() and how to use it instead of .bind() in this situation.
What im trying to do here is i click a link and that is supose to bind another click event, but instead it triggers that event right away. I looked in the documentation/jquery.js file and this is how im suppose to do it.
Demo: http://jsfiddle.net/bNaFV/
$('#click_me').on('click', function(){
$('#show_me').addClass('remain');
//this is only suppose to bind that next time i click anywhere on the document it should hide
// not right away
$(document).on('click', 'html', function(){
$('#show_me').hide();
});
});
$("#click_me").hover(
function () {
$('#show_me').show();
},
function () {
if ($('#show_me').hasClass('remain')){
return;
} else {
$('#show_me').hide();
}
}
);
click me<br /><br />
<div id="show_me"></div>
You need to stop the propagation of the event:
$('#click_me').on('click', function(e){
e.stopPropagation(); //Stop the event from bubbling further
$('#show_me').addClass('remain');
$(document).on('click', 'html', function(){
$('#show_me').hide();
});
});
This is because the event has been captured at the #click_me element. You then bind an event handler for that same event type somewhere higher up the DOM tree. The event then continues bubbling up the tree and reaches the document, where it triggers the new event handler.
Here's a working example.
Update (see comments)
As noted by #zerkms in the comments, I think you probably only want to bind the event handler to document once. You could use the one method to do so, which unbinds the event handler after it's been executed once:
$(document).one('click', 'html', function(){
$('#show_me').hide();
});
How can I get this code to only execute its button:
<span id="spanClicker">
<span id="subClicker">
[Click Me]
</span>
</span>
like this fiddle: http://jsfiddle.net/rpCVy/
http://jsfiddle.net/malet/rpCVy/3/
You can use e.stopPropagation() to prevent the click event firing for both elements.
Also on a side note the .live function is deprecated as of jQuery 1.7 .on should be used instead.
Here is what you're looking for:
$( '#subClicker' ).on( 'click', function (e) {
alert( 'subClicker' )
// Now here is the magic you want:
e.stopPropagation( )
} )
As you can guess, e.stopPropagation() allows you to prevent the event from propagating to its parent elements.
This ought to do it.
http://jsfiddle.net/rpCVy/2/
New javascript
$(function()
{
$("#spanClicker").live("click",function()
{
alert('Span Clicked');
});
$("#subClicker").live("click",function(e)
{
alert('Button Clicked');
e.stopPropagation();
});
});
The anonymous function associated with .click can take an event for the first argument. Call the stopPropagation() method of the event object to stop the click event from bubbling up to containers of the target element of the event.
Suppose I have:
<div id="outer" onclick="thingsHappen()">
<div id="inner"></div>
</div>
When I click on outer or inner div, thingsHappen() is executed. That is obvious.
Now I have got a need to define a different method for the inner div.
For example
$("#inner").click(function() {
doThings();
});
When I click on inner both thingsHappen() and doThings() executes.
How do I execute doThings() when I click on inner div without executing thingsHappen()?
I tried to unbind click method from #inner, but it did not work.
PS. I cannot change the structure of HTML.
Stop the propagation of the event:
$("#inner").click(function(e) {
doThings();
e.stopPropagation();
});
Example: http://jsfiddle.net/QNt76/
JavaScript events bubble up the DOM tree unless you stop them from propagating. This is what was causing the parent event handler to get notified.
You want Event.stopPropagation():
$("#inner").click(function(e) {
doThings();
e.stopPropagation();
});
Events pertaining to a child element bubble up to parent elements in the DOM unless propagation is stopped like so:
$("#inner").click(function(event) {
doThings();
event.stopPropagation();
});
Here is a good read on capturing/bubbling and Javascript events. http://www.quirksmode.org/js/events_order.html
$("#inner").click(function(e) {
e.stopPropagation();
doThings();
});
What you are trying to do is stop the event (click) from "bubbling" up. In this case, you would want to stop the propagation of the event in the bubbling phase. If you are using jquery, you can use this function:
HTML
<div id="outer" onclick="thingsHappenOuter()">
<div id="inner">
</div>
</div>
JS
$("#inner").click(function(event) {
event.stopPropagation();
// do something
});
SEE: http://api.jquery.com/event.stopPropagation/ for more information.
You have to stop the propagation to the Document Tree:
$("#inner").click(function(event) {
doThings();
event.stopPropagation();
});
See: http://api.jquery.com/event.stopPropagation/
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
I have the following code:
$(document).ready(function () {
$("tr").live('click',function(){
alert("TR");
});
$("input").live('click',function(){
alert("INPUT");
});
});
Fiddle here
How can I just trigger the click function for the checkbox without triggering the tr function? Is there any solution with jQuery?
I will not set return false at the end of the input function and I really need the tr element too.
Info: event.stopPropagation doesn't work on live() events.
You can use the stopPropagation() method on the event object.
It will prevent the event from bubbling up without cancelling the default event behavior.
$(document).ready(function () {
$("tr").click(function(){
alert("TR");
});
$("input").click(function(e){
alert("INPUT");
e.stopPropagation();
});
});
As it seems you are using .live() and not direct event binding, you can't use stopPropagation().
First of all, .live() is legagcy code and has been deprecated, which means it could be removed from the library in any future new version. I don't know which version of jQuery you are using but you should consider moving to the latest (which is more optimized anyway) and use .on() for event delegation.
Nevertheless, if you can't upgrade your jquery library, here's maybe a solution to your problem. The event parameter passed to all event handler contains a property target which reference the element from which the event was initiated. So you could do something like:
$("tr").live('click',function(e){
if (e.target.nodeName !== "INPUT") {
// if ($(e.target).is('input') === false) { // jquery style but maybe less efficient
alert("TR");
}
});
Not very elegant but does the trick. Here's an example.
The problem with .live() is that events are binded to the document so as more complex as your application would become, you may end up with headaches to stop propagation.
In the meantime I've made a fiddle using .on() (here) and one using .delegate() (here).
You need to add stopPropagation() to your input click handler. It will stop the event bubbling up the DOM to parent elements.
$(document).ready(function () {
$("tr").click(function(){
alert("TR");
});
$("input").click(function(e){
alert("INPUT");
e.stopPropagation();
});
});
Example fiddle
OP Updated Question:
$(document).ready(function () {
$("TABLE").delegate("tr", 'click',function() {
alert("TR");
});
$("TABLE").delegate("input", 'click',function(e) {
e.stopPropagation();
alert("INPUT");
});
});
Use stopPropagation() for input handler
http://jsfiddle.net/KJg6Q/
http://jsfiddle.net/LwvYD/2/
e.stopPropagation() in handle on input or use e.relatedTarget
$("tr").click(function(e){
if( e.relatedTarget.tagName != "input" )
alert("TR");
});