How to prevent click event in jQuery?
html, javascript, jquery
Solution
If you're using jQuery, get rid of the inline JS and CSS and move them into their own files:
CSS:
.milestonehead { cursor: pointer; }
.image { float: right; }
HTML
<h4 class="milestonehead" data-id="35">
Some Header
<img class="image" src="/images/delete.gif">
</h4>
JS
$(document).on('click', '.milestonehead', function () {
var id = $(this).data('id');
editFun(id);
});
In this case you can just use the data id on the parent node. Data attributes are by far the best way to store data on your HTML elements.
$(document).on('click', '.image', function (e) {
e.stopPropagation();
var id = $(this).parent().data('id');
deleteFun(id);
});
Problem
My html code is as follows: ``` <h4 class="milestonehead" style="cursor: pointer;" onclick="editFun('35');"> Some Header <img src="/images/delete.gif" style="float: right;" onclick="deletefun('35');"> </h4> ``` There are two functions in `<h4>` if user click on header i.e `<h4>` then I need to open a popup with edit form. If user click on delete image/icon then I need to execute a delete function. Both functions `editFun` and `deletefun` execute ajax calls. In my case if the user clicks on delete icon then first it calls `editFun` function and then it is calling `deleteFun`. How can I call the appropriate function for the event.