Question

我正在尝试通过单击按钮将div添加到一行内容中。我的代码适用于第一行，但不适用于任何其他行。请帮忙。这是按钮的功能：

$(".addMMbtn").each(function() {
        $(this).bind("click",
            function() {
                var thisRow = $(this).closest(".txtContentRow");
                var thisTxt = thisRow.find(".txtContent");
                var cellStr = '<div class = "mmCell prep"></div>';
                $(cellStr).appendTo(thisTxt);
            }
        );
    });

您可以在此处看到问题的小提示：http://jsfiddle.net/z7uuJ/

Answer 1

您不需要遍历元素来绑定处理程序：

$(".addMMbtn").live('click', function() {
    var thisRow = $(this).closest(".txtContentRow");
    var thisTxt = thisRow.find(".txtContent");
    var cellStr = '<div class = "mmCell prep"></div>';
    $(cellStr).appendTo(thisTxt);
});

Answer 2

$(".addMMbtn")只会找到页面上显示的元素，而您的代码只会在其上附加click事件处理程序。由于您要动态添加元素，因此您应该使用delegate或on（如果您使用的是jQuery 1.7+）来处理click事件。试试这个

使用delegate

  $('#default').delegate('.addMMbtn', 'click', function() {
      $('<div class = "mmCell prep"></div>')
      .appendTo($(this).closest(".txtContentRow").find(".txtContent"));
  });

使用on

  $('#default').on('click', '.addMMbtn', function() {
      $('<div class = "mmCell prep"></div>')
      .appendTo($(this).closest(".txtContentRow").find(".txtContent"));
  });

<强> Demo

Answer 3

您需要使用on()：

，而不是直接在按钮上分配点击事件

    $(document).on("click", ".addMMbtn", 
        function() {
            var thisRow = $(this).closest(".txtContentRow");
            var thisTxt = thisRow.find(".txtContent");
            var cellStr = '<div class = "mmCell prep"></div>';
            $(cellStr).appendTo(thisTxt);
        }
    );

在这种情况下，事件处理程序将订阅所有新添加的元素。

代码：http://jsfiddle.net/z7uuJ/5/

尝试将内容附加到DOM元素

3 个答案: