Javascript 事件加载两次

在一个页面中，我有两个相同的HTML表单，一个是通过jquery动态生成的，另一个是通过

asp.net

。我在每个相同页面的点击按钮上添加了验证

第一个按钮

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

第二个jquery表单以

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

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

如果我单击第二个提交按钮，问题将出现 然后出现以下顺序

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

3）

和

4）

顺序不应出现。如能解决此问题，我们将不胜感激

这里的这一行：

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

选择ID包含字符串

'btnFrmSubmit'

的所有元素。如果希望该字符串仅适用于第一个按钮，请准确选择该按钮的ID，而不选择

*

：

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

或者，更简洁地说

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

---

这是因为

btnFrmSubmitn

包含

btnFrmSubmit

，这使得第一个事件处理程序也被附加。因此，基本上，您已经为

btnFrmSubmitn

附加了两个事件处理程序。这是意料之中的事。

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