javascript - 打破JavaScript功能

我有一个点击事件

$('#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来破坏函数，但是对于click事件，我需要一个新函数，因此return false只会终止该事件内的click事件。我的意思是-如果您将上面的注释行// IF A NEW SHIP替换为以下代码：

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

这段代码只会结束此click事件，而不会结束moveShip函数。

我希望我已经足够清楚了...
谢谢！

最佳答案

您可以预先取消绑定现有的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 - 打破JavaScript功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18048245/