javascript - 如何处理将元素添加到页面的事件？

Question

我有一个应用程序，点击链接会弹出一个模式。在模式中是一个表单。我需要监控该表单的提交。

我在我的 JS 中附加了一个点击处理程序，如下所示:

$('.vex-dialog-form :submit').click (event) ->
    alert "hi"

该警报未触发，我相信这是因为我需要为该模态加载附加某种事件处理程序，然后将提交事件放入其中。

关于如何解决这个问题有什么建议吗？

Answer 1

对于动态添加的 DOM，您需要事件委托(delegate)。使用 .on():

 $('.vex-dialog-form').on('click',':submit',function(){
   alert("hi");
 });

如果父级 .vex-dialog-form 也被动态添加，那么使用:

 $(document).on('click','.vex-dialog-form :submit',function(){
   alert("hi");
 });