JQuery: .on处理程序不附加到动态添加的元素

JQuery: .on handlers not attaching to dynamically added elements

本文关键字：动态 添加 元素 on 处理 程序 JQuery      更新时间：2023-09-26

我现在正在创建一个评论系统。当页面加载时，有一个用于创建新评论的框，以及一些带有回复按钮的评论。点击回复按钮时，复制并附加评论文本框，如下所示:

$(document).ready(function(){
  $('.reply-button')
    .one('click', function(){
      var parent_id = $(this).parent('.comment').attr('id')
      var parent_id_field = "<input value='" + parent_id + "' type='hidden' name='comment[parent_id]'' id='comment_parent_id'>"
      $(this).replaceWith($('#master-comment-form').clone().attr('id', "reply-div-" + parent_id))
      $('#' + "reply-div-" + parent_id).find('.field').append(parent_id_field)
    });

填好框并提交表单后，我运行这个脚本，根据AJAX调用的响应追加注释。

jQuery(function () {
    //target comment-form from comment form partial
    $(".comment-form-div")
        .on("ajax:beforeSend", function (evt, xhr, settings) {
            console.log("Ajax request sent")
            return $(this).find('text_area')
                .addClass('uneditable-input')
                .attr('disabled', 'disabled');
        })
        .on("ajax:success", function (evt, data, status, xhr) {
            console.log("Ajax request successful")
            $(this).find('text_area')
                .removeClass('uneditable-input')
                .removeAttr('disabled', 'disabled')
                .val('');
            return $(xhr.responseText).hide().insertAfter($(this)).show('slow');
        });
});

问题是用于附加评论的JQuery只适用于原始回复框。新的回复框——从注释上的.clone生成的回复框——似乎没有附加处理程序，当表单仍然提交时，用于AJAX调用的JQuery .on从未运行。

这可能是一种适合使用委托事件处理的情况

$(document).on('ajax:beforeSend', '.comment-form-div', function (evt, data)
{
   //do something
});

事件将被绑定到文档，但将检查它是否被应用到子选择器，.on

的第二个参数
相关文章：