Question

这是我的代码：

＆＃13;

$("#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>');
});

＆＃13;

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

＆＃13;

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

＆＃13;

如你所见，我无法触发那些复选框。换句话说，我无法将复选框选项标记为已选中或取消选中它。

如何使其可用？

Answer 1

有几种方法：

一种方法是在使用复选框填充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将其挂钩而不是on - 我倾向于忘记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>

...但是如果你使用label元素（你不是，但我推荐它）可能会变得棘手。如果event.target div，您只能处理点击次数：

（我已添加label来说明这一点。）

$("#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>

Answer 2

这是另一个缩短脚本的解决方案：

＆＃13;

.gitignore

＆＃13;

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

＆＃13;

div{
  border:1px solid;
  text-align: center;
}

#one_to_many form {
    display: none;
}

＆＃13;

Answer 3

使用one()，此方法为所选元素附加一个或多个事件处理程序，并指定在事件发生时运行的函数。

使用one（）方法时，事件处理函数仅对每个元素运行ONCE。

＆＃13;

$("#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>');
});

＆＃13;

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

＆＃13;

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

＆＃13;

如何为元素的孩子禁用.onclick？

3 个答案: