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="ment" 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=".1.1/jquery.min.js"></script>

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

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="ment" 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./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?

• javascript
• jquery
• html
• css

• 5 Try to use .one('click') Docs – vp_arth Commented Jan 30, 2017 at 8:40
• you can unbind click as there is no use after one click as well $("#one_to_many").unbind("click"); – Curiousdev Commented Jan 30, 2017 at 8:41
• @vp_arth: Why do I keep forgetting about one?! :-) – T.J. Crowder Commented Jan 30, 2017 at 8:42
• 1 We forget all rare used things.. – vp_arth Commented Jan 30, 2017 at 8:42

3 Answers 3

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="ment" 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./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="ment" 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./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 remend 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="ment" 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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./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="ment" checked> لایک ها<br>
      <input type="checkbox" name="graph" value="friend" checked> دوستان<br>
      <input type="button" id="cls_btn" value="رسم گراف">
     </form>
</div>

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="ment" 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./ajax/libs/jquery/3.1.1/jquery.min.js"></script>