JQuery没有意识到在选择器中发生了什么

Question

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不承认它在那里。我该怎么解决这个问题？

Answer 1

下面是如何处理动态元素的侦听器(例如，在就绪事件之后)。

​

//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>

​

Answer 2

使用代表团将事件添加到尚未出现的元素中。

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

Answer 3

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

事件将是ajax:beforeSend和ajax:success选择器将是..comment，.数据将是(evt，xhr，设置)和(evt，data，status，xhr)。

如果以上述格式重写，请让我知道您的代码是否有效吗？

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