Question

我使用AJAX将表单插入到我的页面中，然后我也想使用AJAX提交此表单，因此我使用event.preventDefault来停止提交按钮发出POST请求。但是，无论我尝试什么，我都无法停止提交按钮的默认行为，除非我使用return false;。为什么呢？

我也使用DOM事件委派。

编辑：更新了代码，以便在preventDefault和stopPropagation之后添加括号，这不是问题！

EDIT2：没关系，我真是个傻瓜。你们是对的，是没有向preventDefault添加括号。我刚刚意识到我将它们添加到错误的功能中。更新了我的代码，以便在没有括号的情况下显示它，就像它最初一样。遗憾！

初始HTML

<button id="add-form-button" type="button">Add Form</button>

<div id="form-container"></div>

添加新表单的jQuery

$('#add-form-button').on('click', function() {
    // AJAX returns response
    $('#form-container').html(response);
});

添加表单后的HTML

<button id="add-form-button" type="button">Add Form</button>

<div id="form-container">
    <form id="my-form" action="form-action.php" method="post">
        <textarea name="my-textarea"></textarea>    
        <button id="submit-form" type="submit">Submit</button>
    </form>
</div>

jQuery提交表单

// This doesn't work
$('#form-container').on('click', '#submit-form', function(event) {
    event.preventDefault;
    event.stopPropagation; // <-- added this to test
    // Page goes to form-action.php even though it shouldn't
});

// This doesn't work either
$('#form-container').on('submit', '#my-form', function(event) {
    event.preventDefault;    
    event.stopPropagation; // <-- added this to test
    // Page goes to form-action.php even though it shouldn't
});

jQuery可以工作，但不知道为什么

// This works but it doesn't make sense that preventDefault doesn't work.
$('#form-container').on('click', '#submit-form', function(event) {
    return false;
});

有人可以解释为什么preventDefault在这种情况下不起作用，但return false;确实有用吗？

Answer 1

您正在调用preventDefault()和stopPropagation()，就好像它们是属性，而不是方法：

event.preventDefault();
event.stopPropagation();

添加括号将调用它们。

编辑（因为您修复了代码中的parens问题）：

将侦听器委派给document，submit将不会触发您选择的元素（在某些浏览器和jQuery版本中）。

$(document).on('submit', '#my-form', function (event) {
    event.preventDefault();
    event.stopPropagation();
)};

或者，理想情况下，在submit创建后将#my-form侦听器附加到submit。这样，[ { "id": "2", "slug": "parent", "title": "Parent", "subcategories": [ { "id": "12", "slug": "child1", "title": "child1" }, { "id": "14", "slug": "child2", "title": "child2" }, { "id": "15", "slug": "child3", "title": "child3" }, { "id": "16", "slug": "child4", "title": "child4" } ] }, { "id": "11", "slug": "parent2", "title": "Parent2", "subcategories": [ { "id": "32", "slug": "child1", "title": "child1" }, { "id": "33", "slug": "child2", "title": "child3" } ] } ] [ { "id": "2", "slug": "parent", "title": "Parent", "subcategories": [ { "id": "12", "slug": "child1", "title": "child1" }, { "id": "14", "slug": "child2", "title": "child2" }, { "id": "15", "slug": "child3", "title": "child3" }, { "id": "16", "slug": "child4", "title": "child4" } ] }, { "id": "11", "slug": "parent2", "title": "Parent2", "subcategories": [ { "id": "32", "slug": "child1", "title": "child1" }, { "id": "33", "slug": "child2", "title": "child3" } ] } ] $.getJSON("data.json" , function(json) { $.each(json,function(i, value){ $.each(value.subcategories, function(index, obj){ $('#list-category-slider').append('<div class="item"><a href="/' + obj.slug + '">' + obj.title + '</a></div>'); }) }); });事件将显示在您的开发工具中的事件侦听器下。

Answer 2

这里有3件事。首先，您没有正确调用函数。你错过了括号：

event.preventDefault();
event.stopPropagation();

其次，您需要处理该事件submit和form的{{1}}事件。您现在处理的方式是您正在处理表单容器的preventDefault()事件（submit）。 #form-container没有要处理的Div事件。您需要处理submit的{{1}}事件：

submit

第三，您正在动态创建表单，因此您执行操作的顺序非常重要。 您必须在创建表单后连接#my-form事件处理程序。这里棘手的是因为你要添加html，实际在DOM中渲染表单可能需要几毫秒。所以我会将这项任务推迟半秒左右：

$('#my-form').on('submit', function(event) {
    event.preventDefault();    
)};

preventDefault无法处理使用AJAX加载的表单

2 个答案: