CODEWITHSUNDEEP
javascriptjqueryhtmlcss
stack
stack

Reputation: 10228

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

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?

Upvotes: 8

Views: 3715

Answers (3)

Jishnu V S
Jishnu V S

Reputation: 8407

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>

Upvotes: 2

Banzay
Banzay

Reputation: 9470

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>

Upvotes: 4

T.J. Crowder
T.J. Crowder

Reputation: 1075875

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>

Upvotes: 12

Related Questions