javascript - PreventDefault 不适用于加载 AJAX 的表单

Question

已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。

---

这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

已关闭 5 年前。

Improve this question

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

我还使用 DOM 事件委托(delegate)。

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

编辑2:没关系，我很蠢。你们是对的，它没有在 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();

添加括号将调用它们。

编辑(因为您修复了代码中的括号问题):

将监听器委托(delegate)给 document，submit 不会为您选择的元素触发(在某些浏览器和 jQuery 版本中)。

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

或者，理想情况，在创建后将 submit 监听器附加到 #my-form。这样，submit 事件将显示在开发工具中的事件监听器下。