Javascript 动态生成的html元素停止工作
在下面的代码中,我在数组中有一些注释,它们使用jQuery显示在div中。每个评论都有一个选项按钮,在我发布新评论之前,该按钮可以正常工作。我尝试为每个元素使用唯一的ID,但也不起作用 当页面加载时,选项按钮起作用;但当我提交新评论时,所有按钮都不起作用。我做错了什么 这是我的剧本:Javascript 动态生成的html元素停止工作,javascript,jquery,Javascript,Jquery,在下面的代码中,我在数组中有一些注释,它们使用jQuery显示在div中。每个评论都有一个选项按钮,在我发布新评论之前,该按钮可以正常工作。我尝试为每个元素使用唯一的ID,但也不起作用 当页面加载时,选项按钮起作用;但当我提交新评论时,所有按钮都不起作用。我做错了什么 这是我的剧本: var i = 0; var comments_display= ""; var comments = ['Hello World!', 'Hello! This is a comment.']; //reads
var i = 0;
var comments_display= "";
var comments = ['Hello World!', 'Hello! This is a comment.'];
//reads the entire array, creates the content, and sends it to the div
function show_comments(){
for (i=0; i<comments.length; i++){
comments_display += "<div class='single_comment_container'>";
comments_display += "<div class='comment_comment'>" + comments[i] + "</div>";
comments_display += "<div class='options'>Options</div></div>";
}
$("#comment_container").html(comments_display);
comments_display = "";
}
//appends a new comment to the array
function new_comment(){
if ($("#comment_input").val() == null || $("#comment_input").val() == ""){
alert("Your comment must be at least 1 character long.");
}
else{
comments.push($('#comment_input').val());
show_comments();
$("#comment_input").val("");
}
}
$(document).ready(function(){
show_comments();
$("#submit_comment").click(function(){
new_comment();
});
//display a message when an element of the class 'options' is clicked
$(".options").click(function(){
alert("OPTIONS");
});
});
var i=0;
var注释_display=“”;
var comments=['Hello World!','Hello!这是一条评论'];
//读取整个数组,创建内容,并将其发送到div
函数show_comments(){
对于(i=0;i您需要使用委托:
$(document).on( 'click', '.options', function() {
alert("OPTIONS");
});
注意:您可能希望使用除文档
以外的静态元素(某些始终在页面上的父级div
或其他内容)。您需要使用委派:
$(document).on( 'click', '.options', function() {
alert("OPTIONS");
});
注意:您可能希望使用除document
之外的静态元素(某些总是在页面上的父级div
)仅仅因为您要动态添加元素,所以单击无法处理这些元素,所以您必须在页面上找到最接近的现有父级,这里是注释容器
,并使用.on()
处理程序:
因为您正在动态添加元素,所以单击无法处理这些元素,所以您必须在页面上找到最接近的现有父级,在您的情况下,这里是注释\u容器
,并使用.on()
处理程序:
第一个响应是正确的,原因是当元素加载到DOM中时,您分配了事件侦听器。本质上说,如果“单击”了,请执行一些操作。问题是,当添加新元素时,您还没有添加事件侦听器。通过执行类似于上述代码的操作,基本上就是您正在执行的操作搜索文档中的所有内容,然后搜索“.options”类,最后如果单击,则执行一些代码
尽管如此,使用文档并不是最理想的方法,但有时是必要的。更好的解决方案是将所有注释封装在一个“div”中或者其他一些元素,然后通过它来代替文档。这将代替搜索整个文档中的“.options”,它只会搜索包装,从而消除许多不必要的工作
$('.commentWrapper').on( 'click', '.options', function() {
alert("OPTIONS");
});
第一个响应是正确的,原因是当元素加载到DOM中时,您分配了事件侦听器。本质上说,如果“单击”了,请执行一些操作。问题是,当添加新元素时,您还没有添加事件侦听器。通过执行类似于上述代码的操作,基本上就是您正在执行的操作搜索文档中的所有内容,然后搜索“.options”类,最后如果单击,则执行一些代码
尽管如此,使用文档并不是最理想的方法,但有时是必要的。更好的解决方案是将所有注释封装在一个“div”中或者其他一些元素,然后通过它来代替文档。这将代替搜索整个文档中的“.options”,它只会搜索包装,从而消除许多不必要的工作
$('.commentWrapper').on( 'click', '.options', function() {
alert("OPTIONS");
});
就是这样!非常感谢,我不知道授权。就是这样!非常感谢,我不知道授权。非常感谢你的回答,这确实是我需要的,但是凯文先回答了,我认为我应该选择他的答案,因为两者基本相同。但你的回答帮助我有了更好的理解站在我的立场上。再次感谢。:)太好了!很高兴我们帮助了你。祝你好运:)非常感谢你的回答,这确实是我需要的,但是凯文先回答了,我想我应该选择他的答案,因为两个答案基本相同。但是你的回答帮助我更好地理解了我的问题。再次感谢。:)太好了!很高兴我们帮助了你uck:)