Javascript 为什么jQuery alls ALLERT（）会出现更多次？

我现在有一个很大的问题，从昨天开始我就一直想弄清楚，但我真的不知道这里会有什么问题

因此，我基本上在代码中调用了jQuery Ajax，如下所示：

var ajaxCall = function(id, token)
{
    var datap = { "id": id, "token": token };

    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: datap,
        dataType: "json",
        beforeSend:function()
        {
            // loading image
        },
        success: function(data)
        {
           setting(data);
        },
        error: function()
        {
            alert('error');
        }
    });

var setting = function(data)
{
    $('#testDiv').html(data.country);
}

至于success函数，您可以看到

设置

函数，如下所示：

var ajaxCall = function(id, token)
{
    var datap = { "id": id, "token": token };

    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: datap,
        dataType: "json",
        beforeSend:function()
        {
            // loading image
        },
        success: function(data)
        {
           setting(data);
        },
        error: function()
        {
            alert('error');
        }
    });

var setting = function(data)
{
    $('#testDiv').html(data.country);
}

基本上，只要有人单击以下项目，就会调用ajax：

$('#popup').on("click", function(){
    ajaxCall();
});

因此，当有人单击弹出按钮时，他们将打开一个弹出窗口，其中包含加载的Ajax内容

这实际上是完美的工作。我唯一的问题是，如果我想在弹出窗口中创建另一个事件（如：单击）

因此，如果我将其放在上面的Ajax调用函数中，它看起来如下所示：

$('#popup').on("click", function(){
    ajaxCall();
    load();
});

问题： 当我点击opoup按钮加载弹出窗口时，它会加载Ajax内容。当我第一次尝试单击弹出窗口中的

#按钮时，加载页面后，它会给我一个带有1的警告框

然而！如果我只是关闭opoup窗口并再次单击它来加载弹出窗口，然后再次单击
#按钮
，现在我收到了
警报（1）
两次！如果我再做一次，我得到了3次，4次，依此类推

所以基本上我发现，如果我使用
on Click
函数（在加载ajax后的弹出窗口中），那么
on Click
函数中的内容会被调用更多次，如果我加载弹出窗口更多次（不刷新页面-刷新后，一切都从头开始）

因此，第一次弹出式加载和单击是正常的，但其他的似乎会被调用更多次。我还检查了Ajax调用是否被多次调用，但事实并非如此。我在代码的每个部分中都放置了一个递增数字，只有在单击
#按钮时，它才会递增多次

我知道这很难理解，但我真的需要别人的帮助，因为我完全迷路了。任何解决方案都将不胜感激。
无论何时调用load，您都将绑定click事件，要触发它一次，您应该绑定它一次。在绑定load之前，请在每次调用load时解除绑定，或者使用on进行事件委派。若您必须用id绑定事件，那个么您应该直接绑定，因为id应该使用“不使用子体选择器”

var load = function()
{
    $('#testDiv #button').off("click");
    $('#testDiv #button').on("click", function(){
        alert(1);
    }
}

我建议您对动态添加的元素使用事件委派

$(document).on("click", '#testDiv #button',function(){
   alert(1);
});

委托事件

委派事件的优点是，它们可以从中处理事件
以后添加到文档中的子元素。通过
选择一个元素，该元素保证在
已附加委派事件处理程序，您可以使用委派事件
避免频繁附加和删除事件处理程序

根据评论编辑

由于这两个元素都存在于dom中，并且没有动态加载，所以只需单击事件即可。由于ID应该是唯一的，所以不要使用父子选择器

$('#testDiv').on("click", function(){ 
    alert(1); 
}); 

我建议你这样做：

将单击事件绑定到该函数之外，并将其放入doc ready：

$('#testDiv #button').on("click", function(){
    alert(1);
});

并在
#弹出窗口中执行此操作
单击事件：

$('#popup').on("click", function(){
   ajaxCall();
   $('#testDiv #button').trigger('click');
});

您应该尝试
$（document）.on（“单击”、“#testDiv#按钮”，function（）{alert（1）；}
你应该学习不要绑定函数中的点击事件。谢谢你的回答。奇怪的是，我尝试了你的第一个解决方案，效果很好。但是当我尝试你的第二个解决方案时，效果与以前完全一样。那么为什么会发生这种情况？这两个#testDiv#按钮是你想要绑定的不同元素吗或者您想在#testDiv内的#按钮上绑定事件？我想使#按钮可单击，即whithin#testDiv（弹出窗口）。这两个按钮都是动态添加的吗？$（#testDiv#按钮。）.on（“单击”，函数（）{alert（1）；}）；