选中复选框时,我正在尝试触发JQuery。起初我意识到我的 JQuery 仅适用于静态元素。我通读了几篇文章,发现我需要.on("click, function()))才能为动态添加的元素触发同一段javascript。
但是,这种方法仍然对我不起作用。谁能帮忙?谢谢。
$(document).ready(function(){
$("input[name='todo']").on('click', function(){
var isChecked = this.checked
if (isChecked == true){
$(this).next().remove();
$(this).remove();
}
if (isChecked == false)
{
alert("checkbox is NOT checked");
}
});
});
我的示例应用:http://jsfiddle.net/JSFoo/7sK7T/8/
你需要委派:
$('#ToDoList').on('click', "input[name='todo']", function() { ... });
http://jsfiddle.net/7sK7T/9/
文档:http://api.jquery.com/on/#direct-and-delegated-events
PS:重要说明 - 您需要指定将处理程序绑定到的元素尽可能靠近目标元素。在您的情况下,它是#ToDoList
,而不是body
或document
其他答案建议。
对于动态元素,您可能希望执行以下操作
$(document).ready(function () {
$(document).on('click', "input[name='todo']", function () {
var isChecked = this.checked
if (isChecked == true) {
$(this).next().remove();
$(this).remove();
}
if (isChecked == false) {
alert("checkbox is NOT checked");
}
});
});
如果您像以前一样使用它on('click')
与click();
基本相同,因为您仍在选择所需的元素并将事件应用于这些元素,则上述示例的工作方式是仅将事件应用于document
然后在触发事件时检查选择器。
如果需要,您还可以将document
更改为要单击的元素的紧密容器。
这称为事件委派
jQuery Learn Event 委派
以下是您需要的。语法略有不同
$(document).on('click', "input[name='todo']", function(){
您将元素绑定到文档就绪上,这是在创建它们之前。您必须在创建它们后绑定。
或者,您可以在 document.ready 上绑定他们的容器:
$("#containerDiv").on('click', "input[name='todo']", function(){
// .... your code
});
- "containerDiv"应该是这些复选框的父元素,它应该在文档就绪的页面中!