javascript - 事件加载两次

Question

在一个页面中，我有两个相同的 HTML 表单，一个是通过 jquery 动态生成的，一个是通过 asp.net 生成的。 。我在每个相同页面的单击按钮上添加了验证。

第一个按钮

var s = $(' <input type="button" ID="btnFrmSubmit" runat="server" Text="Submit"  value="FrmSubmit" />');
$("#mainTbl").after(s);

第二个按钮

里面是</asp:Panel>

<input name="btnFrmSubmitn" type="button" id="btnFrmSubmitn" runat="server"  value="Submitn"/>

第一个 jquery 表单开头为

$(document).ready(function () {
    $(document).on("click", "[id*=btnFrmSubmit]", function () {
        alert("hi");  
        //validation Part
        alert("v1");  
    });
});

第二个 jquery 表单开头为

$(function () {  
    $("#btnFrmSubmitn").click(function () {
        alert("hi...");  
        //validation Part
        alert("V2");  
    });
});

如果我单击第二个提交按钮，问题就会出现 btnFrmSubmitn然后发生以下序列

1) alert("hi...");
2) alert("V2");
3) alert("hi");
4) alert("v1");

3)和4)序列不应该发生任何想法来解决这个问题将不胜感激。

Answer 1

这行在这里:

$(document).on("click", "[id*=btnFrmSubmit]", function () {

选择 ID 中任意位置包含字符串 'btnFrmSubmit' 的所有元素。如果您希望它仅适用于第一个按钮，请准确选择该按钮的 ID，而不带 *:

$(document).on("click", "[id=btnFrmSubmit]", function () {

或者更简洁

$(document).on("click", "#btnFrmSubmit", function () {