CODEWITHSUNDEEP
jqueryhyperlink
jq beginner
jq beginner

Reputation: 1070

how to disable a link created by another link by jquery (jsfiddle included)

i have a link when clicked it creates a div with another link inside it i want to disable the new link tried many solutions like preventDefault and return false but didn't work and here's the example http://jsfiddle.net/2RSJj/1/:

$(document).ready(function(){
$("a[title='go']").click(function(e){
    $(".cities").append("<div class='city'><a href='http://www.google.com' class='mylink'>google</aiv>"); 
    e.preventDefault();
});

$(".cities .city a").click(function(e){
    e.preventDefault();
    alert($(this).attr("class"));
});

});

main html :

<a href="#" title="go">go</a><p>
<div class="cities">

</div>

Upvotes: 0

Views: 250

Answers (1)

David Thomas
David Thomas

Reputation: 253308

As the link is dynamically added, you should use the on() method (assuming jQuery >= 1.7; jQuery < 1.7 should use delegate()) to prevent the default action of said link:

$('.cities').on('click', 'a.mylink', function(e){
    e.preventDefault();
});

JS Fiddle demo.

The problem you were having is that the link isn't present when the event-binding happens, therefore the click() method doesn't bind the click event to the relevant a element. With on(), the click is attached to a parent/ancestor element (that exists at the point of event-binding), and then listens for that event (the 'click' string in the first argument) being fired on an element that matches the selector (passed as the second argument).

Assuming that both the event and the selector match (the a.mylink element is click-ed), then the function is executed, which in this case simply prevents the default action being fired. It is, though, important to note that with delegated events you cannot simply return false, because the event has, by definition, already been fired by the time it's propagated/bubbled up to the ancestor element to which the event is bound.

Also, if an element between the two elements has an event handler that explicitly implements return false then the event delegation won't progress past that element (since the click will propagate/bubble to the element with the handler, which will respond with the return false (a combination of event.stopPropagation() and event.preventDefault()).

For example, in the following code, I'm using the html:

<a href="#" title="go">go</a><p>
<div class="cities">
    <div class="demo">
    </div>
</div>

In this case the on() method remains attached to the .cities element, but the .demo element has a click-handler which simply, as you might imagine, returns false:

$("a[title='go']").click(function(e){
    $(".demo").append("<div class='city'><a href='http://www.google.com' class='mylink'>google</a></div>"); 
    e.preventDefault();
});

$('.cities').on('click', 'a.mylink', function(e){
    e.preventDefault();
    // using an alert because a simple 'e.preventDefault()` wouldn't
    // be visibly different to the 'return false'
    alert(e.type + ' event reached the ".cities" element!');
});

$('.demo').click(function(e){
    return false;
});

JS Fiddle demo.

In the above note that there is no alert fired when clicking the a.mylink element, whereas without that click-handler intercepting (and negating) the click event, the alert() is fired:

$("a[title='go']").click(function(e){
    $(".demo").append("<div class='city'><a href='http://www.google.com' class='mylink'>google</a></div>"); 
    e.preventDefault();
});

$('.cities').on('click', 'a.mylink', function(e){
    e.preventDefault();
    alert(e.type + ' event reached the ".cities" element!');
});

JS Fiddle demo.

So, be aware of those events bound to your elements when using delegation. It can be tricky (ish), when starting.

Reference:

Upvotes: 2

Related Questions