jQuery：函数被调用两次。传播？为什么会发生这种情况？

请看下面的小提琴：

我花了3-4个小时在这段代码上，我把它缩小到了最短的版本，现在我被卡住了

问题: 1.单击“divOne” 2.单击“切换分区名称” 3.点击'divTwo'

*为什么divOne仍处于警报状态？我该怎么阻止这一切*逻辑告诉我，当我们单击

divTwo

时，我们只会收到一个写着“divTwo”的警报

请注意，

doSomething（）

有一个函数，该函数由其内部的

单击触发。这不能更改，即
$（“+divName”）。单击（函数（）{…}）必须留在
doSomething（）内

对此我能做些什么？
事件绑定到元素而不是它们的类名，每当调用函数时，您都会将一个单击处理程序附加到匹配的元素上。这就是为什么您会看到调用了几个处理程序。您可以通过使用传递的参数使用事件委派，也可以使用
off
方法删除处理程序

编辑：通常当您将多个处理程序附加到一个元素时，您是在做错误的事情。在其他处理程序中附加事件处理程序会带来痛苦。应该将逻辑移到处理程序的主体中

在这种情况下，我可能会这样做：

var $e = $(".action").on('click', function() {
     var action = $(this).data('action');
     // Do something based on the element's current `action` datum
     if (action === 'whatever') {
       // ...
     } else {
       // ...
     }
});

function doSomething(divName) {
    $e.html(divName).data('action', divName);
}

在这里，
操作
数据可以用于处理程序的逻辑。
如果使用Google Chrome，最简单的方法就是使用组件视图。您可以看到，在单击Switch div名称之前，第一个div如下所示：

<div class="action divOne">divOne</div>

它已经调用了该函数。这就是为什么切换后会得到divOne和divTwo作为响应

这个更新版将按照您的预期运行。
使用
off
删除事件侦听器并再次添加，切换类名不会解除现有事件侦听器的绑定-

function doSomething(divName){

    $(".action").off().addClass(divName).html(divName).click(function(){
        alert(divName);
    });
}

在这种情况下，我将如何使用
off
方法？如果您希望保持当前布局，请@johnbau Koppolu提供更好的解决方案。
doSomething("divOne");//First call on Dom Ready

function doSomething(divName){

    $(".action").off().addClass(divName).html(divName).click(function(){
        alert(divName);
    });
}