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?

you can unbind click as there is no use after one click as well $("#one_to_many").unbind("click"); — Curiousdev, 3 hours ago

T.J. Crowder · Accepted Answer · 2017-01-30 08:44:55Z

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>

just wondering why this kind of scenario happens, this is kinda weird :D — Roljhon, 3 hours ago

Banzay · Answer 2 · 2017-01-30 08:55:16Z

Here is one more solution with a shorten script:

$("#one_to_many").on("click", function(){
    $("#one_to_many form").toggle();
});
$("#one_to_many form").on("click", function(event){
    event.stopPropagation();
});

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

#one_to_many form {
    display: none;
}

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

<div id="one_to_many">click
<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" id="cls_btn" value="رسم گراف">
     </form>
</div>

Naila · Answer 3 · 2017-01-30 08:58:58Z

use one() , This method attaches one or more event handlers for the selected elements, and specifies a function to run when the event occurs.

When using the one() method, the event handler function is only run ONCE for each element.

$("#one_to_many").one("click", function(e){
    $( 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;
}

<div id="one_to_many">click</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

asked	today
viewed	161 times
active	today

current community

your communities

more stack exchange communities

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

3 Answers 3

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript jquery html css or ask your own question.

Hot Network Questions

current community

your communities

more stack exchange communities

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

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript jquery html css or ask your own question.

Related

Hot Network Questions