Question

可以找到正常的表单提交拦截。但是，我的班级不同。调用函数后动态添加表单。然后，无法捕获表单提交。

如何捕获这样的表单提交？最好使用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事件时，请检查它是否是您的目标表单。如果它是你的目标形式，那就做你想做的事。

<强> EDITED 正如@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/

拦截动态添加表单提交

1 个答案: