3

我有 2 个 html 元素：A 和 B，这是 jquery 代码：

$('A').click(function(){
    $('B').click(function(){
        console.log("hello");
    })
})

当我单击 A 然后单击 B 时，它会显示“你好”，这很好。但是当我再次单击 A 然后单击 B 时，这一次它显示了两个“你好”，这是不可取的。我只想要一个你好。

我或多或少知道原因，可能是回调函数的结果：B在第一次点击后还在等待用户点击它。

现在我的问题是：如果我仍然想在“点击A”中“点击B”（“点击B”是“点击A”的回调函数），我该如何解决双重结果问题？

我是回调函数的新手，请帮忙！！！

4

3 回答 3

4

您当前的代码并没有完全按照您的想法执行。每次单击A时，它都会向 中添加一个新的单击处理程序B。因此，如果您单击A3 次，您将获得 3 个单击处理程序B，所有这些处理程序都在单击 B 时执行。

一种解决方法是在 As click handler 中取消注册 Bs click handler，例如：

$('A').click(function(){
    // Ensure we only ever have one click-handler on B
    // by clearing existing handlers before adding our
    // new one.
    $('B').unbind('click').click(function(){
        console.log("hello");
    })
})

但是，此代码具有删除所有s 处理程序的副作用B，这是您可能不想要的。仅删除特定处理程序的更强大的版本是创建一个命名处理程序，而不是一个匿名处理程序，然后添加和删除它。这使您可以定位所需的特定处理程序。您也可以使用命名空间来执行此操作（请参阅取消绑定的文档并查找“命名空间”）。

var helloHandlerForB = function() { console.log("hello"); };

$('A').click(function(){
    // Ensure we only ever have one click-handler on B
    // by clearing existing handlers before adding our
    // new one.
    $('B').unbind('click', helloHandlerForB).click(helloHandlerForB);
})
于 2012-07-25T09:30:38.670 回答
1

问题是，每次连续点击都会A向您的B. 当您单击 时，这些处理程序中的每一个都会被执行B。所以如果你点击A十次，你就绑定了十个点击处理程序B:-D

为了避免其他解决方案的问题，不断取消和重新绑定以及都令人讨厌的全局变量，请改用这个干净的解决方案：

$('A').one("click", function(){
    $('B').click(function(){
        console.log("hello");
    })
})

通过使用.one()而不是单击，单击事件A仅触发一次，将一个单击事件处理程序绑定到您的元素B。

示例小提琴

于 2012-07-25T09:54:00.930 回答
1

您还可以创建一个布尔值来检查是否单击了 a。

示例：小提琴

var aIsClicked = false; //boolean

$('#A').click(function(){
   $('#log').html('clicked on A');
   aIsClicked = true;
});

$('#B').click(function(){
   if(aIsClicked) //check if a was clicked
   {
       $('#log').html('clicked on B and A was clicked');
       alert("hello");
   }
    else
    {
        $('#log').html('clicked on B and A was not clicked');
    }
});​

​</p>

于 2012-07-25T09:34:38.397 回答