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

这是处理动态元素的侦听器的方式（例如，在ready事件之后）。

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

其中event为ajax：beforeSend和ajax：success选择器为.comment形式，.reply形式的数据为（evt，xhr，设置）和（evt，数据，状态，xhr）

如果以上述格式重写您的代码是否可以正常工作，请告诉我吗？

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