Question

我目前在这里有一个很大的问题，我从昨天开始就试图解决这个问题，但我真的不知道这里可能出现什么问题。

所以我基本上在我的代码中做了一个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');
        }
    });

对于成功函数，您可以看到setting函数，如下所示：

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

基本上，一旦有人点击了以下项目，就会进行这个ajax调用：

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

因此，当有人点击弹出按钮时，他们将打开一个带有加载的Ajax内容的弹出窗口。

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

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

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

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

的问题：

当我点击opoup按钮时，要加载弹出窗口，它会加载Ajax内容。当我第一次尝试在弹出窗口中点击#button时，在加载页面后，它会给我1个警告框。

然而！如果我只是关闭opoup窗口并再次点击它，加载弹出窗口，而不是再次点击#button，现在我得到了alert(1) 2次！如果我再次执行上述操作，我会 3次， 4次，依此类推。

基本上我已经发现，如果我使用on Click函数（在弹出窗口中，在加载了ajax之后），on Click函数中的内容被调用了很多次，如果我加载弹出窗口更多次（没有刷新页面 - 刷新后，一切都从一开始就是stratrat）。

所以第一次弹出加载和点击是正常的，但其他人似乎被调用了更多次。我还检查过多次调用Ajax调用，但它不是。我在代码的每个部分都放置了一个增量编号，只有在点击#button时才会增加多次。

我知道这很难理解，但我真的需要别人的帮助，因为我完全迷失了。任何解决方案都会非常感激。

Answer 1

在调用load时绑定click事件，触发一次，你应该绑定一次。每次调用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);
});

委派活动

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序jQuery docs。

根据评论

修改

由于这两个元素都存在于dom中而未动态加载，因此您只需要单击事件。由于id应该是唯一的，所以不要使用父子选择器

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

Answer 2

我建议你这样做：

将您的点击事件绑定到该功能之外，并将其置于doc ready中：

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

并在#popup点击事件中执行此操作：

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

为什么jQuery alls Alert（）更多次？

的问题：

2 个答案: