CODEWITHSUNDEEP
javascriptjqueryhoverlive
Ian
Ian

Reputation: 1910

How do I disable the onclick of parent when live child is clicked?

So typically I just use stopPropegation when I need to prevent the default action of the parent when a child is clicked. However, this doesn't seem to be work with live elements. So I had the idea to temporarily remove the onclick attribute of the parent when the child is hovered over. I seem to be able to remove it just fine, but I cannot seem to be add it back to the element... this is what I came up with...

$('body').delegate('.button', 'mouseenter mouseout', function(e){
        if(e.type=='mouseenter'){
          var inside = $(this).parents('.post').attr('onclick');
          $(this).parents('.post').attr('onclick','');
        }else if(e.type=='mouseout'){
          $(this).parents('.post').attr('onclick', inside);
        }
    })

So this will remove the element successfully, however the attempt to add it back is always unsuccessful... it just comes up empty. Can anyone give me a hand here? I'm completely stuck. I'd also be happy with alternative method to achieving the same result. Thank you.

Upvotes: 0

Views: 582

Answers (2)

itea
itea

Reputation: 444

try this http://jsfiddle.net/kDuNU/4/:

$('div').live('click', function(event) {
    if ($(event.target).hasClass('button'))
       return;
    alert('hello');
});

$('.a-span').live('click', function (event) {
    alert($(this).text());
});
$('div').append('<span class="a-span button">another</span>');

<div> hello <br/>
    <span class="a-span">world</span>
</div>

Upvotes: 1

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Try something like this:


if(e.type=='mouseenter'){
    $(this).parents('.post').unbind('click');
}else if(e.type=='mouseout'){
    $(this).parents('.post').bind('click');
}

//OR place your inside variable before if, like
var inside = $(this).parents('.post').attr('onclick');  //placed outside of if
if(e.type=='mouseenter'){   
   $(this).parents('.post').attr('onclick','');
}else if(e.type=='mouseout'){
   $(this).parents('.post').attr('onclick', inside);
}

Hope it works for you

Upvotes: 0

Related Questions