Question

我有点击事件

$('#ship_Move').click(function (event) {                
        event.stopPropagation();
        $('.shipActionsList').remove();
        moveShip(shpID);
    });

调用函数moveShip

function moveShip(shp_id) {
    $('.fieldDivs').click(function () {       
        $("#hello").append("Move "+ shp_id + "to " + $(this).attr('id')+"<br/>");
    });
}

调试正在给出正确的结果 - 但有一个问题。如果我首先单击#ship_Move元素4次，然后选择目标（.fieldDivs），我会得到这个：

将162移至FD455

因为moveShip函数已被调用了4次，并且每个函数都在等待单击.fieldDivs元素，并且当它被单击时，所有4个函数都会追加它们的结果（162是我想要的发货ID）移动，FD455是它的目的地）。

我需要的是这些内容：

function moveShip(shp_id) {
    $('.fieldDivs').click(function () {       
        $("#hello").append("Move "+ shp_id + "to " + $(this).attr('id')+"<br/>");
        // IF A NEW #SHIP_MOVE IS CLICKED, END THIS FUNCTION AS IT WILL BE CALLED AGAIN
    });
}

我知道我可以返回false来中断函数，但是对于click事件我需要一个新函数，所以return false只会结束该事件中的click事件。我的意思是 - 如果您使用以下代码交换上述注释行// IF A NEW SHIP：

 $('.ship_Move').click(function () {       
         //   return false would break this function
        });

此代码仅结束此单击事件，但不结束moveShip功能。

我希望自己足够清楚...... 谢谢！

Answer 1

您可以预先取消绑定现有的click事件处理程序：

$('.fieldDivs').off('click').click(function() {
   // ...
});

如果还有其他click事件处理程序应该保留，我建议使用命名空间事件：

$('.fieldDivs').off('click.move').on('click.move', funciton() {
   // ...
});

虽然在考虑之后，不是一遍又一遍地绑定事件处理程序，你可以只绑定它们一次并通过变量共享必要的数据：

$(function() {
   var shpID = ...; // however this is set

    $('#ship_Move').click(function (event) {                
        event.stopPropagation();
        $('.shipActionsList').remove();
        // set shpID here somehow?
    });

    $('.fieldDivs').click(function () {       
        $("#hello").append("Move "+ shpID + "to " + $(this).attr('id')+"<br/>");
    });
});

看起来您不必仅因为shpID更改而绑定新的事件处理程序。当然这是一个简化的例子，因为我不知道你的代码，但也许它有帮助。

打破javascript功能

1 个答案: