Question

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');
    }
});

Answer 1

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]