jQuery e.stopPropagation Conflict With body onclick

Question

I have bootstrap dropdown menu. To make it keep on show on click inside dropdown then I set it to JavaScript like this

$('.dropdown-menu').click(function(e)
{
     e.stopPropagation();
});

It works. Then now I have

$(document).ready(function() 
{
     $('body').on("click",'#btn_post',function(e)
     {
          alert("waw");
     }
});

<button class="btn btn-default" id="btn_post">Click</button>

When I click button, I can't see the alert "waw". But when I remove the e.stopPropagation(); the alert will appear.

I want that 2 function can be run without conflict.

If this is *really* your code, the function for the button isn't closed properly. — Scott, Mar 15 '16 at 04:59
`$('body').on("click",'#btn_post',function(e) { alert("waw"); });` You are missing a closing parenthesis and a semicolon. — Scott, Mar 15 '16 at 05:04

score 1 · Answer 1 · edited May 23 '17 at 12:15

Rather than using stopPropagation use preventDefault it might fix your problem.

stopPropagation is used to make sure the event doesn't bubble up the chain. eg. a click on a <td> tag would also fire click events on it's parent <tr>, and then its parent <table>, etc. stopPropagation prevents this from happening.

preventDefault is used to stop the normal action of an element, eg. preventDefault in a click handler on a link would stop the link being followed, or on a submit button would stop the form being submitted.

for more detail event.preventDefault vs event.stopPropagation

jQuery e.stopPropagation Conflict With body onclick

1 Answers1