Question

我现在正在创建评论系统。页面加载时，有一个框用于创建新评论，还有一些带有回复按钮的评论。单击克隆时回复按钮并附加注释文本框，如下所示：

$(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永远不会运行。

Answer 1

这可能是使用委托事件处理

的情况之一

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

事件将绑定到文档，但会检查它是否应用于子选择器，.on的第二个参数

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

1 个答案: