How do I prevent the behavior of an element behind another element after clicking the foremost element?

Question

I currently have a li element containing a link. Inside of that link, I have an icon contained in an i enclosure. When the user clicks that icon, a JavaScript .click() is called, but the function of the parent element is called. I want the click on the icon to trigger the function meant to act on the icon solely.

If this helps, here's what my list item looks like:

<li class="saved-search">
  <a href="#" class="" style="display:none">
    <i style="display:none" class="fa fa-times-circle pull-right saved-search-delete"></i>
  </a>
</li>

The Javascript looks like:

// this is the click event attached to the parent element of the icon
$('#save-search-name').keypress(function(event) {
 ...
});

// this is the icon click event
$('body').on('click', '.saved-search-delete', function(e) {
    var saved_search_id = $(this).attr('data-search-id');
    var searchJSON = {'id': saved_search_id };
    // console.log('TROLOLOLOLOLOOOOOOL 2');

    $.ajax({
        url: '/adv/saved_search/',
        contentType: 'application/json; charset=UTF-8',
        type: "DELETE",
        quietMillis: 200,
        data: JSON.stringify(searchJSON),
        success: function (response) {
            Messenger().post({
                 type: 'success',
                 message: 'Saved search successfully deleted.',
                 showCloseButton: true,
                   hideAfter: 3,
            });

        }
    }); // end ajax call

});

How do I isolate the act of clicking the icon with the desired behavior in my JavaScript? I still want the link to be clickable and to act as its default behavior should allow it. However, when the icon on top of it is clicked, I want only that icon's behavior to be triggered.

@charlietfl It can't be. Thanks for pointing that out. However, I'm still left with my question of how to prevent the link from being clicked simultaneously with the click of the overlaying element. — Mr_Spock, Mar 03 '15 at 20:02

Banana · Accepted Answer · 2015-03-04T13:52:47.537

stop the event propagation:

$('body').on('click', '.saved-search-delete', function(event) {
    event.stopPropagation();
});

UPDATE:

i was under the impression that you want to stop the event from reaching the #save-search-name element, in which case stopping propagation will work. however, it occurred to me that you might be wanting to stop the default action of the parent anchor <a>, in which case you need to prevent the default action from happening as clicking an element wrapped by an anchor will activate the anchor by default:

$('body').on('click', '.saved-search-delete', function(event) {
    event.stopPropagation();
    event.preventDefault();
});

Also, if stopping propagation does not work for you, you can check at the parent's click handler if the target of the click is that parent himself, or a child element and perform the action as needed:

$('#save-search-name').click(function (event) {
    if(event.target==this){
        alert("parent Clicked");
    }
});

This did not work. I've updated the code sample to help you visualize what's going on. — Mr_Spock, Mar 03 '15 at 20:15
Using `preventDefault()` in conjunction with `stopPropagation()` worked, as you suggested in your updated answer. Thanks. — Mr_Spock, Mar 04 '15 at 16:57

How do I prevent the behavior of an element behind another element after clicking the foremost element?

1 Answers1