如何在动态元素上使用 preventDefault？

Question

我有一堆动态创建并添加到 div 的表单。每个表单的 id 也是动态创建的 - id 总是不同的，但它们都以...

开头

updateFRM_

我无法让 preventDefault() 工作 - 我不确定这是否是问题所在，或者语法是否不正确导致 js 失败并重新加载。

为动态生成和动态命名的表单设置侦听器的正确语法是什么？

$( "#updater" ).on( "submit", "form[id^='updateFRM_']", function(e)
{ 
    e.preventDefault();

感谢您的宝贵时间和帮助

Answer 1

试试这个

 $(function(){
    $("form[id^='updateFRM_']").on("submit", function(e){
        e.preventDefault();
    });
 });

Answer 2

您应该为表格分配 class，例如 .prevent-default 并以这种方式操作它们。处理动态生成的 ID 是一个巨大的麻烦，尤其是 CSS 选择器。

Answer 3

使用 $(document) 选择器，您可以定位动态生成的元素。这是因为文档涵盖了 dom 而不仅仅是最初加载的 html。以下是您可以执行的操作的两个示例。这完全取决于您的代码以及您将使用它的方式，您选择两者中的哪一个。

基于ID

var formid = 'someformid';
$(document).on('submit', '#' + formid, function(e) {
    e.preventDefault();
    // Do your form stuff
    return false;
});

Class 基于

$(document).on('submit', '.my-form', function(e) {
    e.preventDefault();
    var formid = $(this).attr('id');
    // Do stuff with the formid 
    return false;
});

更新

不需要return false;。我添加它以防 e.preventDefault() 失败。一些 jQuery 版本有不同的方法来阻止默认操作。使用 return false; 做同样的事情。它执行上面的代码，然后，而不是执行默认操作 returns false.

如何在动态元素上使用 preventDefault？

How to use preventDefault on dynamic elements?

jquery

forms

dynamic

preventdefault

基于ID

Class 基于

更新