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

几个小时以来，我一直在想这个问题，但不明白为什么它不起作用。我有一个有很多帖子的时间表。最初的文章可以通过直接的PHP输出获得。以下文章都是通过ajax/jscroll插件加载的

任何帖子都可以被喜欢或评论。适用于初始立柱，但不适用于后期加载的立柱。现在我尝试了一些方法：

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

以上仅适用于初始职位

$(".likeContainer").on('submit','form', 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\uuuu posts\uu容器

是单个post的父容器

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

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

initLikeForm（）

然后基本上使用第一个函数来提交类似的内容。虽然这对喜欢的人有效，但对我的评论无效。但这可能是另一个问题。我知道事件委托，并且确信至少第二个函数会很好，我找不到第二个，甚至第一个函数不起作用的解决方案

“不工作”是指提交实际表单，而不是（like）函数中的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.');
});

---

要使事件委派正常工作，必须在页面加载时加载父容器。这使jQuery能够侦听您选择的容器中出现的事件

事件委派允许我们将单个事件侦听器附加到 父元素，该元素将为匹配 选择器，无论这些子体现在存在还是添加到 未来

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

$("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>

$（“#divThatLoadsWithPage”）。关于（'submit'，'form'，函数（事件）{
event.preventDefault（）；
//代码。。。
}

---

查看以获取更多信息

您的第二位代码

$（“.likeContainer”）..

看起来是正确的，假设您的新帖子正在加载到页面加载时最初加载的

.likeContainer

中。作为快速测试，您可以将代理处理程序向上移动到正文，然后在（'submit'，'form'，function（event）上测试您的

..

。帖子加载到不同的容器“div.timeline\uuuu posts”中。但该容器中有三种形式（如，comment，delete）。我用我测试过的第三个例子进行了问题更新。@JamesHill你的答案真的很有用！我现在使用了最外层的容器来加载帖子。但是，我仍然不明白为什么其他方法不起作用。。。\uu在页面加载时是否存在

div.timeline\uu posts

容器，还是加载了内容？对于事件delegation若要工作，您需要将事件冒泡到页面加载时加载的容器中。我很高兴它起到了帮助作用。我添加了一个带有更多解释的答案，以帮助其他有类似问题的人。