How can I disable .onclick for element's children?

Question

Here is my code:

$("#one_to_many").on("click", function(){
    $( this ).html('<form action="demo_form.asp">\
      <input type="checkbox" name="graph" value="like"> کامنت ها<br>\
      <input type="checkbox" name="graph" value="comment" checked> لایک ها<br>\
      <input type="checkbox" name="graph" value="friend" checked> دوستان<br>\
      <input type="button" value="رسم گراف">\
     </form>');
});

div{
  border:1px solid;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="one_to_many">click</div>

As you see I cannot trigger those checkbox. In other word, I cannot mark a checkbox option as selected or deselect it.

How can I make it available?

Answer 1

There are a couple of ways:

One is to remove the click handler once you've populated the div with the checkboxes:

$("#one_to_many").on("click", function(){
    // ------vvvvvvvvvvvvv
    $( this ).off("click").html('<form action="demo_form.asp">\
      <input type="checkbox" name="graph" value="like"> کامنت ها<br>\
      <input type="checkbox" name="graph" value="comment" checked> لایک ها<br>\
      <input type="checkbox" name="graph" value="friend" checked> دوستان<br>\
      <input type="button" value="رسم گراف">\
     </form>');
});

div{
  border:1px solid;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="one_to_many">click</div>

(Or as vp_arth points out, just use one to hook it up instead of on — I tend to forget about one!)

Another is to check the event.target within the click handler and ignore the event if it's a checkbox:

$("#one_to_many").on("click", function(event){  // ***
    if ($(event.target).is("input[type=checkbox]")) {
        return;
    }
    $( this ).html('<form action="demo_form.asp">\
      <input type="checkbox" name="graph" value="like"> کامنت ها<br>\
      <input type="checkbox" name="graph" value="comment" checked> لایک ها<br>\
      <input type="checkbox" name="graph" value="friend" checked> دوستان<br>\
      <input type="button" value="رسم گراف">\
     </form>');
});

div{
  border:1px solid;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="one_to_many">click</div>

...but if you use label elements (you aren't, but I'd recommend it) that could get tricky. You could only process the click if event.target is the div:

(I've added labels to this to illustrate.)

$("#one_to_many").on("click", function(event){  // ***
    if (event.target != this) {
        return;
    }
    $( this ).html('<form action="demo_form.asp">\
      <label><input type="checkbox" name="graph" value="like"> کامنت ها</label><br>\
      <label><input type="checkbox" name="graph" value="comment" checked> لایک ها</label><br>\
      <label><input type="checkbox" name="graph" value="friend" checked> دوستان</label><br>\
      <input type="button" value="رسم گراف">\
     </form>');
});

div{
  border:1px solid;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="one_to_many">click</div>