CODEWITHSUNDEEP
javascriptjquery
Ben
Ben

Reputation: 62434

jQuery .live('click') not working as intended

I'm trying to setup the below emblem-important.png so when you click this item, it'll ignore the parent element with .editable's listener and only use the one I've assigned it. The below code works great in Chrome, but not IE 8. It's not working in IE 8 and I need it to. Without using onClick() I'm not sure the best way to set this up in IE 8. It'd be much easier if I could just set it up with listeners in JS...

<div class="cell editable" style="float:left;width:99%; font-weight:bold; font-size:16pt; padding-bottom:50px" data-fieldid="684709" data-fieldname="Product Name">
     <span id="sob_form_span_684709"><strong>Freedom Communications: Choice PPO</strong><img src="/img/emblem-important.png"></span>
</div>

//toggle the form status
jQuery('#formStatus').change(function () {
    jQuery.get('/products/ajax_updateStatus/'+Page.formId+'/'+jQuery(this).val()+'/', {}, function () {
        notify('check', 'Status has been updated');
    });
});

jQuery('.editable').live('click', function () {
    var urlPieces = (document.location+'').split('/');
    jQuery.fancybox({
        'href': urlPieces[0]+'/'+urlPieces[1]+'/'+urlPieces[2]+'/'+urlPieces[3]+'/update_form_field/'+jQuery(this).attr('data-fieldId'),
        'title': jQuery(this).attr('data-fieldName'),
        'autoDimensions': false,
        'margin': 0,
        'padding': 15,
        'width': '768',
        'scrolling': 'auto',
        'height': jQuery(window).height() - 100,
        'onComplete': function() {
            jQuery("#fancybox-title").css({
                'top':'-10px',
                'bottom':'auto'
            });
        }
    });
});

jQuery('img[src=/img/emblem-important.png]').live('click', function (e) {
    e.stopPropagation();
    if (confirm('Are you sure you want to restore this field to its original content?')) {
        var locSplit = (document.location+'').split('/'),
            id = jQuery(jQuery(e.currentTarget).parent()).attr('id'),
            fieldId = jQuery(this).closest('td').attr('data-fieldId');
        jQuery.get('/customs/revertField/'+locSplit[locSplit.length-1]+'/'+fieldId, function (r) {
            jQuery('#'+id).html(r.fieldValue);
        }, 'json');
    }
});

Upvotes: 1

Views: 484

Answers (3)

Pointy
Pointy

Reputation: 413826

It doesn't make much sense to call "stopPropagation()" on an event when using ".live()" to handle it. By the time your handler is called, the event has already propagated all the way up to the body tag.

Instead of doing that, you could simply check the event target and ignore it when appropriate:

if ($(event.target).is('img[src=/img/emblem-important.png]'))
  return; // or whatever

The "live" mechanism works by using a framework-supplied event handler on the <body> element. When that handler gets the event, it looks through the manifest of registered handler selectors and applies each of those when the target matches.

edit — you could also try "event.stopImmediatePropagation()" instead. edit again nope :-) however returning false is apparently documented as working.

Upvotes: 0

mddw
mddw

Reputation: 5590

Won't return false do the trick nicely ?

Cf. Jquery doc :

To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.

Upvotes: 1

Guffa
Guffa

Reputation: 700562

Some browsers will expand the src attribute to the URL actually used to request the image.

Using the attribute ends with selector should fix that:

img[src$=/img/emblem-important.png]

Upvotes: 2

Related Questions