javascript - 拦截动态添加的表单提交

Question

正常的表单提交拦截可以找到。但是，我的类(class)不一样。该表单是在调用函数后动态添加的。那么，表单提交就无法被捕获。

如何捕获这样的表单提交？最好使用 Jquery，但更改动态添加的表单属性是可以接受的。

以下是示例。这是我捕获表单提交的方法。

$(function() {
    $(".formClass").submit(function(e) {
      e.preventDefault();
      var actionurl = e.currentTarget.action;
      alert(actionurl);
    });
});

以下是调用函数 eObj.getFormElement() 后如何添加表单

(function($){
    function(eObj) {
        var selector = "#abc";

        //Call the function to get the form elements
        eObj.getFormElement(langObj, function(err, x) {
            var elem = "<ul>";
            for (var i=0; i<x.length; i++) {
                 var formId = elementId + "_sform_" + i;
                 elem = elem + "<li class='product_" + i + "'>" 
                 for (var key in x[i]) {
                      elem = elem + "<div class='price'>" + curMap[curKey] + x[i][key].price + "</div>";
                      elem = elem + "<div class='s'><form id='" + formId +"' class='formClass' method='post' action='" + x[i][key].url + "'>"
                           + "<input class='s_btn' type='submit' value='" + submitLabel + "'>"
                           + "</form></div>";
                 }
                 elem = elem + "</li>";
            }
            elem = elem + "</ul>";

        //Append the form to the div after we create the forms 
        $(selector).append(elem);
    }); 
}})(jQuery);

Answer 1

由于您无法为不存在的元素设置事件，因此您需要为现有元素设置事件。

在这种情况下，您可以使用document来获取事件。

http://jsfiddle.net/h189o3xc/

这是一个示例代码。

$(document).on("submit",function(e){
    if($(e.target).hasClass("formClass")){
        e.preventDefault();
        console.log("you can catch the event!");
        //and do whatever you want.
    }
});

为文档设置一个事件，每当发生任何submit事件时，检查它是否是您的目标表单。如果这是您的目标形式，那么您可以做任何您想做的事情。

已编辑正如 @charlietfl 提到的，您可以使用额外的 on 函数参数而不是 if 语句。

代码会是这样的..

$(document).on("submit",".formClass",function(e){
      e.preventDefault();
      console.log("you can catch the event!");
      //and do whatever you want.
}); 

http://jsfiddle.net/h189o3xc/2/