event.stopPropagation() is not working in jQuery event handler

Question

In my jQuery mobile app, I have this code

$(context).on("click", ".search-person", function() {
    var id = $(this).attr("data-id");
    PROFILE_MODULE.getProfile(id);
});

$(context).on("click", ".search-person .ui-checkbox .ui-btn", function(e) {
    //toggle checkbox
    $(this).click();
    //don't change page
    e.stopPropagation();
});

.search-person is a table row and .search-person .ui-checkbox .ui-btn is a checkbox in a column in a row.

If I click that checkbox, I don't want the row click event to trigger. But in this code, it still does after the e.stopPropagation() runs, what's wrong?

Answer 1

e.stopPropagation(); does actually stop the propagation of the event, however what it does not prevent is $(context).on("click", ".search-person", function() {}); from calling its handler, they are distinct and different events.

You can fix this by adding an element type condition to the selector that matches the tr :

"tr.search-person"

Now the selector does not match the checkboxes with the search-person class.

Here is a complete example:

 var context = $('table'); $(context).on("click", "tr.search-person", function() { alert('row'); }); $(context).on("click", ".search-person.ui-checkbox.ui-btn", function(e) { alert('check box'); // this.click(); will also work but why bother // if all you are doing is clearing the checkbox $(this).prop('checked', !$(this).prop('checked')); e.stopPropagation(); });

 tr.search-person { background-color: lightblue; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr class="search-person"> <td>Click Here and the Check Box</td> <td> <input class="search-person ui-checkbox ui-btn" type="checkbox"> </td> </tr> <tr class="search-person"> <td>Click Here and the Check Box</td> <td> <input class="search-person ui-checkbox ui-btn" type="checkbox"> </td> </tr> </table>

Alternatively you can check to see the element type that triggered the event:

$(context).on("click", ".search-person", function() {
    if ($(this).is('tr')) {
        var id = $(this).attr("data-id");
        PROFILE_MODULE.getProfile(id);
    }
});

Answer 2

I had a similar issue and fixed it when I used

$(selector).click(function(){ ... })

instead of

$(context).on("click", selector, function(){ ... });

Answer 3

do this:

$(context).on("click", ".search-person .ui-checkbox .ui-btn", function(e) {
    //toggle checkbox
    this.checked = !this.checked;
    //don't change page
    e.stopPropagation();
});

Answer 4

How about:

e.preventDefault();

You might also need to return false from the handler.

Answer 5

I solved it with this hack:

$(context).on("click", ".search-person", function(e) {
    if (!e.hasOwnProperty('_clickedName')) {
        var id = $(this).attr("data-id");
        PROFILE_MODULE.getProfile(id);
    }
});

$(context).on("click", ".search-person .ui-checkbox .ui-btn", function(e) {
    e['_clickedName'] = true;
});