Question

我的页面中有一个附加到表单的jquery处理程序。然后我动态加载一些组件，可能包括一个表单，它应该得到相同的jquery处理程序。

我知道这一点，并且我应该使用.live（）或.on（）来将处理程序附加到这个动态加载的组件，并且我已成功将此技术应用于其他地方。

然而，在这种情况下，我发现难以使用.on（），因为我不想再次编写新表单的代码。是否可以告诉元素应用相同的处理程序？

所以，这是我的代码结构

$(".myForm").submit(
            function() { alert("do stuff");}
      );

$(".loadPage").click(
       function() {
             $.post( "my_url.php",
        "my_var = " + my_var, 
                 function( data) {
                                //data may contain a form, that is supposed to behave just as myForm
               $("#container").html( data );

                           //now I shoudl be able to apply the handler, but I´m not sure how
                           $("#container .myForm").submit( sameHandler ); 
                      }
               }
      );

所以，我不知道并且我无法弄清楚如何定义“sameHandler”。顺便说一下，动态加载的表单确实有“myForm”类，如果这有帮助，但我不知道是否有任何方法可以在动态加载的元素上“刷新”jQuery指令。 / p>

Answer 1

您可以将提交事件添加到文档中，并将其与选择器

结合使用

$(document).on("submit", ".myForm", function(){alert("do stuff");});

您还可以声明一个可以在多个地方使用的函数变量

var sameHandler = function() {
    alert("do stuff");
};

$(".myForm").submit(sameHandler);
$("#container .myForm").submit(sameHandler);

Answer 2

您可以为变量分配函数，并使用变量名称稍后调用该函数。只需确保它位于可从$ .post（）访问的范围内。此外，使用.on（）几乎总是与.submit（）或.click（）等一样快或快......

var submitHandler = function() {
  alert("do stuff");
};

$(".myForm").on('submit', submitHandler);

$(".loadPage").click(function () {
  $.post("my_url.php", "my_var = " + my_var, function (data) {
    $("#container").html(data);
    $("#container .myForm").on('submit', submitHandler);
  });
});

将处理程序从jquery元素附加到另一个元素

2 个答案: