Question

我有一个div元素，点击后会在其父级上切换一个类。

$('.q-header').on('click', function() {
    $(this).parent('.question-wrap').toggleClass('miniturised');
});
// the 'miniturised' class hides child elements.
// therefore when q-header is clicked the child elements are toggled

我的网站上有一个按钮，点击后，它会通过AJAX将上述div元素之一加载到网站。

$('#addqs').on('click', function() {
    var response;
    $.ajax({ type: "GET",   
         url: "./qt-single-line.html",   
         async: false,
         success : function(text)
         {
             response = text;
         }
    });
    $('#final-row').before(response);
    return false;
});

通过AJAX加载的div不受第一个切换类'miniturised'的函数的影响。为什么新的AJAX内容不受我的JS影响？

编辑：HTML元素如此

<div class="question-wrap miniturised">
    <div class="q-header">
        <span></span>
    </div>
    <div class="q-body">
    </div>
</div>

在普通的DOM元素上，当我点击q-header时，会切换miniturise。这对动态元素不起作用，我知道这一点。我想知道如何解决这个问题。

Answer 1

你新创建的元素不在dom中。

尝试：

$(document).on('click', '.q-header', function() { 
    $(this).parent('.question-wrap').toggleClass('miniturised');
 });

Answer 2

与预加载元素相关联的事件工作正常，但是当您通过AJAX调用动态加载内容时，事件处理程序与它们无关。在这种情况下，您可以做的一件事是通过父元素将事件附加到DOM元素，这可以在页面加载时使用。

$("parentSelect").on('click', 'childSelector', function() {
  // Do this on click.
});

确保在页面加载时你的parentSelector应该可用。

Answer 3

来自jQuery API：

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时的页面上。要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。 如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委派事件附加事件处理程序，

您需要单独绑定任何新的HTML。您的初始on绑定不适用于新元素。

jQuery不影响AJAX加载的内容

3 个答案: