How to stop parent click firing when clicked on dynamic child form

Question

I have a parent grid which bound to a onclick event. Then I have a image which bounds to its own click function. I have used event.stopPropagation(); to stop the parent div firing when click on this one.

Then on the child click event a form will appear with textboxes , combo boxes etc. That form is wrapped in a div. So i used the event propagation to that as well but it does not work. Where ever I clicked on the child form, the parent click event fires.

Is there a solution for this?
html code:

<div id="droppable" class="droppable">
</div>

script: //this is the image click event

$('.configClone'+count).on('click', function (event) {
      event.stopPropagation();

      $(this).addClass("selected"+attrId).parent().append('<div id="pop' + attrId + '" class="messagepop pop' + attrId + '"><form method="post" id="new_message" action="/messages"><p><label for="definedStream">Please select the stream</label><select><option value="volvo">Volvo</option><option value="saab">Saab</option></select></p></form><table border="0"><tr><td><font><b>Attributes</b></font></td><td></td><td><font><b>Assigned Attributes</b></font></td>'+
                        '</tr><tr><td><select id="cmdAllRoles" name="cmdAllRoles" size="6" style="height:100px; width:150px" class="fontDefault" MULTIPLE tabindex="20"></select></td><td valign="middle">'+
                        '<input type="button" id="btnAddRole" name="btnAddRole" value=">" onClick="selectDrag(3)" class="Button-nav" tabindex="15"><br><input type="button" id="btnAddAll" name="btnAddAll" value=">>" onClick="selectDrag(4)" class="Button-nav"><br><input type="button" id="btnRemoveAll" name="btnRemoveAll" value="<<" onClick="selectDrag(1)" class="Button-nav"><br><input type="button" id="btnRemove" name="btnRemove" value="<" onClick="selectDrag(2)" class="Button-nav"><br>'+
                        '</td><td><select id="cmdRoles" name="cmdRoles" size="6" style="height:100px; width:150px" class="fontDefault"></select></td></tr></table></div>');


    //trying to stop propagation from child div
     $(".pop" + attrId).click(function(event) {

          event.stopPropagation();
      alert(5);                   

     });
  }


 $("#droppable").click(function(event) {

    alert(6);
 }

alert(6) fires where ever i clicked on the dynamic form.

Problem2: I will edit this so its easy to explain. using

 $(".pop" + attrId).click(function(event) {

          event.stopPropagation();
      alert(5);                   

     });
  }

code, now i can click anywhere on the form without invoking the parent click. The form has a combobox. But i cannot click on the combobox and see the results listing down now. It does not work. I think its because, i wrapped it with the above click event. Any solution for this ?

Anoop Joshi P Anoop Joshi P · Accepted Answer · 2014-03-06T16:58:32

you can use event.stopPropagation(); in child element click also

$("#parent").on('click', function(e) {
e.stopPropagation();
alert($(this).prop("tagName"));
});
$("#child").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).prop("tagName"));
});

DEMO

I checked your edited question. The problem is that, you are dynamically creating tags. These tags should be bind with delegates.

Example

$(document).on("click",".messagepop",function(event) {

      event.stopPropagation();
  alert(5);                   

 });

How to stop parent click firing when clicked on dynamic child form

2 Answers