How to prevent click event in jQuery?

Question

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.

Answer 1

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);
});