Question

下面提到的是一个jquery代码，其中＆＃39; box1＆＃39;是一个div和＆＃39;颜色＆＃39;是模态对话框中的一个类。但是，它会导致意外行为：当我点击“.colors＆＃39;第一次出现一个警告框，但下次点击时会出现两个警告框（一个接一个）。也就是说，点击第n次将导致＆＃39; n＆＃39;警报箱，一个接一个！

请解释类似的行为和可能的解决方案。

$('#box1').click( function() {
    window.location.href='#openModal';
    $('.colors').click( function() { 
        alert('xyz');
    });     
});

Answer 1

每次点击click时，您都会向.colors分配一个新的#box个活动。您需要使用.one()：

$('#box1').one('click',function() {
    window.location.href='#openModal';
    $('.colors').on('click',function() { 
        alert('xyz');
    });
});

这只会为click分配一次.colors处理程序。如果您希望能够多次点击#box1，则需要将作业与.off()合并：

$('#box1').on('click',function() {
    window.location.href='#openModal';
    $('.colors').off('click').on('click',function() { 
        alert('xyz');
    });
});

这样，#box1只需点击click只需.colors {{1}}，因为每次取消分配并重新分配时，{}但是，我不推荐这个，因为它为DOM做了很多额外的工作。

Answer 2

是的，每次点击.colors时，您都会重新绑定点击#box课程。您可以通过在重新绑定之前解除之前的单击事件来修复它。像这样：

$('#box1').click( function() {
   window.location.href='#openModal';
   $('.colors').off('click').on('click', function() { 
      alert('xyz');
   });
});

重复执行jquery语句

2 个答案: