Question

我想创建一个通用的jQuery代码，它将捕获 submit子元素的所有<form>事件，包括容器元素（如果它是一个表单）

案例是：

容器是表格

<form>
    <button>hi</button>
</form>

容器是另一个包含表单

的元素

<div>
    <form>
        <button>submit</button>
    </form>
</div>

最干净的代码是什么？

我目前的解决方案如下：

function submit(e) {
   // do something
}

$(containerSelectorOrjQueryObject).on("submit", "form", submit);
$(containerSelectorOrjQueryObject).on("submit", submit);

但是，我很高兴知道是否有更好的解决方案，仅使用一次on电话。

Answer 1

您可以使用class属性作为设置委托以捕获任何子表单的submit事件的方法，无论父元素是什么。因为它是一个委托，所以它也会捕获被动态添加的元素触发的任何内容。

包含单个表单方案，div方案中的多个表单以及动态添加表单的按钮的示例：

＆＃13;

var alreadyAdded;

function submit(e) {
    // do something
    alert(e.target.name);
    return false;
}

$("body").on("submit", ".outerContainer", submit);

$("#addAnotherDynamically").on("click", function(e) {
    if (typeof(alreadyAdded) === "undefined") {
        alreadyAdded = true;
        $("#test2").append("<form name='form4'><button>submit 4</button></form>");
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
    <form id="test1" name="form1" class="outerContainer">
        <button>submit 1</button>
    </form>
    
    <div id="test2" class="outerContainer">
        <form name="form2">
            <button>submit 2</button>
        </form>
        <form name="form3">
            <button>submit 3</button>
        </form>        
    </div>
    
    <br>
    <button id="addAnotherDynamically">Add another form</button>
</body>

＆＃13;

Answer 2

提交事件，就像其他事件一样，在DOM中传递气泡，因此将提交事件监听器附加到form本身或其任何父母都可以工作，您甚至可以取消提交。

要始终获取触发提交的form，请在事件侦听器方法中使用e.target而不是this。

见这个例子：

function onSubmit(e){
  e.preventDefault();
   document.getElementById('d3').innerHTML += 'Submit catched in ' + e.currentTarget.tagName + '#' + e.currentTarget.id + ' for ' + e.target.tagName + '#' + e.target.id + '<br/>';  
}

$(function(){
  $('#d1').on('submit', onSubmit);
  $('#f2').on('submit', onSubmit);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
   <form id="f1">
  <input type="submit" value="Event Listener on DIV" />
  </form>  
</div>


<div id="d2">
   <form id="f2">
  <input type="submit" value="Event Listener on Form" />
  </form>  
</div>

<div id="d3">
</div>

运行它并点击按钮，您可以看到使用相同的on调用，您可以将evest附加到表单本身或其父级，它将按预期工作。

所以，你可以只使用下面的一行，它会正常工作：

$(containerSelectorOrjQueryObject).on("submit", submit);

为子元素委派事件，包括当前元素

容器是表格

容器是另一个包含表单

2 个答案: