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

Posted 2023-05-09

【中文标题】如何在动态元素上使用 preventDefault？

【英文标题】：How to use preventDefault on dynamic elements?

【发布时间】：2016-02-15 03:12:45

【问题描述】：

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

updateFRM_

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

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

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

感谢您的时间和帮助

【问题讨论】：

你的表单怎么会有多个id？它有#updater 和#updateFRM_

#updater 是否也是动态创建的？？ .. 尝试 $('body') 而不是 $( "#updater" )

我认为你的代码应该可以工作，前提是#updater 是一个静态元素。 IE。在加载 dom 时存在，是吗？

谢谢大家。动态 id 是通过 mustache 添加的，例如 id="updateFRM_432"。 #updater 是静态的 - 从一开始就是 html 页面的一部分。

【参考方案1】：

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

基于 ID

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

基于类

$(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; 做同样的事情。它执行上面的代码，然后返回false，而不是执行默认操作。

【讨论】：

谢谢彼得。我认为您的课程创意对我来说是最好的方式，但它仍然是自动提交的。我使用的类是 responsiveFormPadded updateAdForm，所以我的听众看起来像 $( "#updater" ).on('submit', '.responsiveFormPadded updaterForm', function(e) ...

我也试过 $(document).on('submit', '.responsiveFormPadded updaterForm', function(e) ...

没关系！！！发现我的错误 - 类部分应该是 '.responsiveFormPadded.updaterForm' - 谢谢！！！！

实际上 - 如果您能够扩展，请提出一个问题 Peter - 为什么我们需要返回 false；？

非常感谢彼得 - 现在一切正常，关于返回错误包含的附加解释也澄清了问题。

【参考方案2】：

试试这个

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

【讨论】：

谢谢你，void - 我认为这也可以，但为了更简单，我已经从 Peter 那里删除了类选择器。

【参考方案3】：

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

【讨论】：

谢谢凯文 - 已经走了。