这是我的代码：
$("#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>
如你所见,我无法触发这些复选框.换句话说,我不能将复选框选项标记为已选择或取消选择.
如何使其可用？
解决方法
有几种方法：
一旦您使用复选框填充了div,即可删除点击处理程序：
$("#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>
(或者作为vp_arth points out,只要使用one挂钩,而不是 – 我往往忘记一个！)
另一个是检查点击处理程序中的event.target,如果它是复选框,则忽略该事件：
$("#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>
…但是如果你使用标签元素(你不是,但我会推荐它)可能会变得棘手.如果event.target是div,则只能处理点击：
$("#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>
