javascript - 破坏 JavaScript 函数

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

将 162 移至 FD455

将 162 移至 FD455

将 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 来中断函数，但是对于单击事件，我需要一个新函数，因此返回 false 只会结束该事件内的单击事件。我的意思是 - 如果您将上面的注释行//IF A NEW SHIP 与以下代码交换:

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

这段代码只会结束本次点击事件，而不会结束moveShip函数。

我希望我已经说得足够清楚了......谢谢!

Answer 1

您可以提前取消绑定(bind)现有的click事件处理程序:

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

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

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

<小时/>

不过，经过考虑，您可以只绑定(bind)一次并通过变量共享必要的数据，而不是一遍又一遍地绑定(bind)事件处理程序:

$(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 发生变化就必须绑定(bind)新的事件处理程序。当然，这是一个简化的示例，因为我不知道您的代码，但也许它有帮助。