表单提交的 jQuery 事件委托(delegate)不起作用

Question

我已经尝试了几个小时来解决这个问题，但无法理解为什么它不起作用。我有一个包含很多帖子的时间表。第一篇初始文章可通过直接 PHP 输出获得。以下任何帖子均通过 ajax/jscroll 插件加载。

任何帖子都可以点赞或评论。对于初始帖子效果很好，但对于后来加载的帖子则效果不佳。现在我尝试了一些事情:

$("form.likeform").submit(function(event) {
   event.preventDefault();
   // code...
}

以上仅适用于初始帖子。

$(".likeContainer").on('submit','form', function(event) {
   event.preventDefault();
   // code...
}

以上仅适用于初始帖子。

以下也不起作用:

$('.timeline__posts__container').on('submit','form.likeform', function(event) {
    event.preventDefault();
    // code...
}

div.timeline__posts__container 是单个帖子的父容器。

接下来我尝试的是使用 jscroll 容器中的回调函数:

$('.timeline__posts__container').jscroll({
    callback: function() {
        initLikeForm();
    }
});

initLikeForm(); 然后基本上使用第一个函数来提交喜欢。虽然这对点赞有用，但对我的评论不起作用。但这可能是另一个问题。我知道事件委托(delegate)，并且确信至少第二个函数可以正常工作，我找不到解决方案为什么第二个函数甚至第一个函数不起作用。

“不工作”是指提交了实际的表单，而不是(类似)函数内的 ajax 调用:

event.preventDefault();
showBaseLoader();
var form = $(this);
var target = $(this).attr('id');
var action = form.attr("action"),
    method = form.attr("method"),
    data = form.serialize(),
    postid = form.attr('data-postid');
$.ajax({
    url: action,
    type: method,
    data: ""
}).done(function() {
    hideBaseLoader();
    form.find('button.like').addClass('liked');
    $('.like'+postid+' .nolikes').css('display','table');
    loadLikes(postid);
}).fail(function() {
    hideBaseLoader();
    alert('Unfortunately your like could not be saved.');
});

Answer 1

为了使事件委托(delegate)正常工作，父容器必须已在页面加载时加载。这允许 jQuery 监听冒泡到您选择的容器的事件。

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

您应该将监听器附加到在页面加载时加载的高级元素(但尽可能低)。要测试该理论，请附加到正文:

$("body").on('submit','form', function(event) {
   event.preventDefault();
   // code...
}

理想情况下，您会这样做:

<div id="divThatLoadsWithPage">
    <!-- AJAX content loaded here -->
</div>

<script>
    $("#divThatLoadsWithPage").on('submit','form', function(event) {
       event.preventDefault();
       // code...
    }
</script>

看看jQuery Event Delegation docs了解更多信息