Jquery 克隆的关闭按钮工作不正常

我正在克隆一些表单元素，它们被包装在一个包含div中。“关闭”按钮第一次起作用，但在其他克隆的表单部分上不起作用

//克隆代码

function newObservation() {
    var len = $('.observation').length;
    var titleLen = $('.observation').length + 2;
    var $html = $('.observationTemplate').clone();

    $('.observationTitle:eq(0)').text("Observation - " + titleLen);
    $html.find('[name=audit-observation-category]')[0].name = "audit-observation-category" + len;
    $html.find('[name=audit-observation-notes]')[0].name = "audit-observation-notes" + len;
    $html.find('[name=audit-observation-recommendation]')[0].name = "audit-observation-recommendation" + len;
    $html.find('[name=audit-observation-severity]')[0].name = "audit-observation-severity" + len;
    $html.find('[name=audit-observation-person]')[0].name = "audit-observation-person" + len;
    $html.find('[name=audit-observation-date]')[0].name = "audit-observation-date" + len;

    return $html.html();
}
$(document).on('pageinit', function () {
    $('<div/>', {
        'class': 'observation',
        html: newObservation()
    }).appendTo('#auditContainer');

    $('#auditObservationButton').click(function () {
        $('<div/>', {
            'class': 'observation',
            html: newObservation()
        }).hide().appendTo('#auditContainer').slideDown('slow');
    });
    $('.observation').on('click', '.close', function () {
        $(this).closest('.observation').fadeOut();
    });
});

//HTML

---

它不绑定到子用户创建的表单节。有什么想法吗？

也许你可以试试这样的方法：

function PageInit() {

  $('body').on({

      click: function () { $(this).closest('.observation').fadeOut(); }

  }, '.close');

}

$(PageInit)

---

)

也许你可以试试这样的东西：

function PageInit() {

  $('body').on({

      click: function () { $(this).closest('.observation').fadeOut(); }

  }, '.close');

}

$(PageInit)

)

：

事件处理程序仅绑定到当前选定的元素；在代码调用.on时，它们必须存在于页面上。要确保元素存在并且可以选择，请在页面上HTML标记中的元素的文档就绪处理程序中执行事件绑定。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委派事件来附加事件处理程序，如下所述

因此，您应该调用包含所有.observation元素的元素。在这种情况下，原始观察结果的父对象就可以了

$('#auditContainer').on('click', '.close', function(){
        //your code here
});

:

事件处理程序仅绑定到当前选定的元素；在代码调用.on时，它们必须存在于页面上。要确保元素存在并且可以选择，请在页面上HTML标记中的元素的文档就绪处理程序中执行事件绑定。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委派事件来附加事件处理程序，如下所述

因此，您应该调用包含所有.observation元素的元素。在这种情况下，原始观察结果的父对象就可以了

$('#auditContainer').on('click', '.close', function(){
        //your code here
});

---

正如我在评论中所说，在您的案例中，目标观察元素是动态创建的。在事件委派中，事件必须绑定到现有元素，因此需要将单击处理程序绑定到要向其中添加观察元素的容器元素

---

正如我在评论中所说，在您的案例中，目标观察元素是动态创建的。在事件委派中，事件必须绑定到现有元素，因此需要将单击处理程序绑定到要向其中添加观察元素的容器元素

---

让我们看看克隆代码和htmlif如果观察元素被克隆，那么您的委派代码是错误的，它应该是$document；您知道最接近的元素是从当前元素开始的，所以$this.closest.observation是，$this？还可以使用.clonetrue；。clonetrue？不要跟随者看到克隆代码和htmlif如果观察元素被克隆，那么你的委派代码是错误的，它应该是$document；您知道最接近的元素是从当前元素开始的，所以$this.closest.observation是，$this？还可以使用.clonetrue；。clonetrue？不要追求卓越，在DOM中的地位还不够高。谢谢太好了，在DOM中上升得不够高。谢谢