0

在下面的代码中，我在一个数组中有一些注释，这些注释使用 jQuery 显示在一个 div 中。每个评论都有一个选项按钮，在我发布新评论之前可以正常工作。我尝试为每个元素使用唯一 ID，但它也不起作用。

页面加载时，选项按钮起作用；但是当我提交新评论时，所有按钮都不起作用。我究竟做错了什么？

这是我的脚本：

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");
});

});

这是一个小提琴，看看它是如何工作的。http://jsfiddle.net/fahKb/3/

感谢您抽出宝贵时间阅读此问题。

4

3 回答 3

3

您需要使用委托：

$(document).on( 'click', '.options', function() {
   alert("OPTIONS");
});

http://api.jquery.com/on/

注意：您可能想要使用除document. div（一些总是在页面上的父母或其他东西。）

于 2013-01-10T18:57:55.737 回答
2

仅仅因为您正在动态添加元素，所以单击将无法在这些元素上工作，因此您必须在页面上找到最近的现有父级，在您的情况下是这样comment_container并使用.on()处理程序：http: //jsfiddle.net/fahKb/ 4/

$('#comment_container').on('click',".options",function(){
  alert("OPTIONS");
});
于 2013-01-10T19:02:39.993 回答
0 
$(document).on( 'click', '.options', function() {
   alert("OPTIONS");
});

第一个响应是正确的，原因是当元素加载到 DOM 中时，您分配了事件侦听器。基本上说嘿，如果这是“点击”然后做点什么。问题是在添加新元素时，您还没有添加事件侦听器。通过执行与上述代码类似的操作，基本上您所做的是搜索文档中所有具有“.options”类的内容，最后如果单击它，则执行一些代码。

话虽如此，使用文档并不是最理想的方法，但有时是必要的。一个更好的解决方案是，如果您将所有评论包装在一个“div”或其他一些元素中，然后将其传递给 document。这将不是在整个文档中搜索“.options”，它只会搜索您的包装器，从而消除大量不必要的工作。

$('.commentWrapper').on( 'click', '.options', function() {
   alert("OPTIONS");
});
于 2013-01-10T20:05:15.943 回答