Question

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

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

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

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

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

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

Answer 1

您当前的代码并没有完全符合您的想法。每次点击A，它都会向B添加一个新的点击处理程序。因此，如果您单击A 3次，则B上有3个点击处理程序，所有这些点击处理程序都会在点击B时执行。

一个修复方法是取消注册Bs单击处理程序作为单击处理程序，例如：

$('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");
    })
})

但是，此代码的副作用是删除您可能不需要的{strong>所有 B个处理程序。更强大的版本，只删除特定的处理程序是创建一个命名的处理程序，而不是一个匿名处理程序，并添加和删除它。这允许您定位所需的特定处理程序。您也可以使用命名空间执行此操作（请参阅unbind的文档并查找“命名空间”）。

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);
})

Answer 2

你也可以制作一个布尔值来检查是否点击过。

示例：fiddle

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');
    }
});

Answer 3

问题是，每次连续点击A都会为您的B添加另一个点击处理程序。当您点击B时，每个处理程序都会被执行。因此，如果您单击A十次，则会将十个点击处理器绑定到B :-D

为了避免其他解决方案的问题，常见的un-and rebinding和全局变量都很讨厌，请使用这个干净的解决方案：

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

使用 .one() 代替点击，A上的点击事件只会触发一次，只会将一个点击事件处理程序绑定到您的元素B

<强> Example Fiddle

如何停止jquery回调函数？

3 个答案: