Question

I’m working on WordPress and using a library that loads its Javascript file at the footer, using <script src>.
This is the code I need to block:

var $ =jQuery.noConflict();
jQuery(document).ready(function($) 
{
    jQuery('.at-delete_image_button').live('click', function(e)
    {
        data = { /* ... */ };
        $.getJSON(ajaxurl, data, function(response) { /* ... */ });
        return false;
    });
});

Right after the <script src>, I’m printing the following but it doesn’t work:

<script type="text/javascript">
jQuery(document).ready( function($) 
{
    $('.at-delete_image_button').live('click', function (e){
        e.preventDefault();
        e.stopPropagation();
    });
});
</script>

From the same Q&A I’ve found the previous code, I also tried the .die('click'); method without success.

[update]

I forgot to add a DOM screenshot.

Answer 1

You can’t preventDefault() from a .live() handler because the event has already propagated when it gets to the .live() handler. You would need to have a handler directly on the actual object itself or on a parent (not using .live()).

If there is a parent object that is not dynamically created, you can stop propagation at that parent and it then won’t get to the .live() handler which is on the document object.

You could do that like this:

jQuery(static parent selector).on('click', '.at-delete_image_button', function(e) {
    // stop propagation up the parent chain so the click event never gets 
    // to the `document` object where .live() would process it
    e.stopPropagation();
});

static parent selector is a selector that matches a static parent of all '.at-delete_image_button' objects.