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();然后基本上使用第一个函数来提交赞。虽然此功能适用于喜欢，但不适用于我的评论。但这可能是另一个问题。我知道事件委托，并且确信至少第二个功能可以正常工作，我找不到解决方案，为什么第二个甚至第一个功能不起作用。

“不起作用”是指提交实际的表单，而不是（类似）函数中的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

为使事件委托正常工作，必须在页面加载时加载父容器。这使jQuery可以侦听冒泡到您选择的容器中的事件。

事件委托允许我们将单个事件侦听器附加到父元素，它将为所有与a匹配的后代触发选择器，无论这些后代现在存在还是被添加到未来。

您应该将侦听器附加到加载页面时加载的高级元素（但尽可能低）。要测试该理论，请附加到身体上：

$("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了解更多信息

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

1 个答案: