Umair Umair - 1 month ago 11
HTML Question

Bind event on LI not not on Anchor tag inside that LI - jQuery

I have this kind of HTML

<li class="one-reference per-reference ui-draggable" item-id="8" style="position: relative;">
<a class="moduleItemTitle" href="http://localhost/derrickpang/index.php?option=com_k2&amp;view=item&amp;id=8">Knee pains</a>
<span class="moduleItemDateCreated">Written on Wednesday, 19 October 2016 05:58</span>
<span class="moduleItemHits">Read 393 times</span>
<div class="clr"></div>
</li>


I have bind event on all LIs with class
per-reference


I do not want to call function
openRefModal
when clicked on
a
tag with class
.moduleItemTitle
I just want to open that link in
href
as normal behaviour of anchor tag.

Here is what I have tried

jQuery(".per-reference").bind("click", openRefModal);
jQuery(".per-reference .moduleItemTitle").unbind("click", openRefModal);

Answer

Just add below code for a tag moduleItemTitle class

jQuery(".per-reference").bind("click", openRefModal);
jQuery(".per-reference .moduleItemTitle" ).click(function( event ) {
  event.stopPropagation();
});

Now a tag is released from click event.

Here is the details about jQuery stopPropagation

Comments