拦截动态添加的表单提交

Intercept a dynamic added form submission

本文关键字：表单提交 添加 动态      更新时间：2023-09-26

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

如何捕获这样的表单提交？最好使用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);

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

在这种情况下，您可以使用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/

相关文章：