JQuery 没有识别出选择器中发生的事情答案

【问题标题】：JQuery not recognizing that something happened in the selectorJQuery 没有识别出选择器中发生的事情
【发布时间】：2015-11-16 02:23:48
【问题描述】：

jQuery ->
  $(".comment-form, .reply-form")
    .on "ajax:beforeSend", (evt, xhr, settings) ->
      debugger;
      $(this).find('textarea')
        .addClass('uneditable-input')
        .attr('disabled', 'disabled');
    .on "ajax:success", (evt, data, status, xhr) ->
      debugger;
      $(this).find('textarea')
        .removeClass('uneditable-input')
        .removeAttr('disabled', 'disabled')
        .val('');
      debugger;
      $(data.comments).hide().insertAfter($(this)).show('fast')

这应该在.comment-form 和.reply-form div 中发生某些事情时运行。但是，代码仅在.comment-form 中发生某些事情时运行。

页面加载时会出现.comment-form div，但.reply-form div 仅在点击“回复”按钮时才会出现。我认为这可能是问题所在 - .reply-form 在页面加载时不存在，因此当它确实出现时，JQuery 无法识别它的存在。我该如何解决这个问题？

【问题讨论】：

.reply-form 是如何加载到页面中的？
每条评论都有一个名为“回复”的链接。单击“回复”时，使用带有 div“.reply-form”的 AJAX 将表单加载到页面中
只要在元素创建后附加监听器。
好吧，我假设您正在通过 DOM 插入表单。您所要做的就是获取您创建的对象并添加处理程序。
Nvm 我明白了，谢谢！

标签： javascript jquery ruby-on-rails ajax coffeescript

【解决方案1】：

使用delegation 向尚不存在的元素添加事件。

$('body').delegate('.comment-form, .reply-form', 'ajax:beforeSend', function (e, xhr, settings) {
  $(this).find('textarea')
    .addClass('uneditable-input')
    .attr('disabled', 'disabled');
});

【讨论】：

在文档中，它说在 jQuery 1.7+ 中，.on() 自动使用委托
这基本上是一样的。 $(parentElement).on('ajax:success', '.comment-form, .reply-form', handler)
不确定我认为的问题是否实际上是现在的问题。因为由于 .on() 会自动进行委托，所以可能还有其他问题。
我不明白会怎样？如果元素不存在，jQuery 对象应该返回一个包含 0 个项目的集合来附加处理程序，因此什么也不会发生。
请发一个例子。仅链接的答案是错误的形式，因为链接可能会过时。

【解决方案2】：

$(document).on( events , selector , data )

事件是 ajax:beforeSend 和 ajax:success 选择器将是 .comment-form、.reply-form 数据将是 (evt, xhr, settings) 和 (evt, data, status, xhr)

如果以上述格式重写，您的代码是否有效，请告诉我？

没有注意到MinusFour在上面的帖子中发表了评论。

【讨论】：

谢谢！这与 MinusFour 相结合真的很有帮助。

【解决方案3】：

以下是您如何处理动态元素的侦听器（例如在准备好的事件之后）。

//Use delegation
$('#delegationparent').on('click', 'div', function(){
  $('#results').html('Delegated div.');
  });
//Insert new div (didn't exist before)
$('<div>Delegate Div</div>').appendTo('#delegationparent');

//No delegate
//Create Div
var div = $('<div>No Delegate Div</div>');
//Attach handler to div
div.on('click', function(){
  $('#results').html('No delegated div');
  });
//Insert Div
div.appendTo('#nodelegate');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="delegationparent"></div>
<div id="nodelegate"></div>
<pre id="results"></div>

【讨论】：