与jQuery一起使用时，事件侦听器触发两次

我在使用事件侦听器和jQuery时遇到了这个问题。出于某种原因，事件持续发生两次

下面是JavaScript：

jQuery(document).ready(function(){

    function tioOverload(e){

        var tioButton = e.explicitOriginalTarget;       
        var path = tioButton.name;

        jQuery.ajax({
            url : ajax_object.ajaxurl,
            type : 'post',
            data : {
                path : path,
                action : "bpnsc_tio_enable"
            },
            success : function(data) {
            console.log('Success enabled ' + data);

            },
            error : function(data){
                console.log(data);
                console.log("failed");
            }
        });

    }

    var tioEn = document.getElementsByClassName("tio-enable");
    for (var i = 0; i < tioEn.length; i++) {
        tioEn[i].addEventListener('click',tioOverload);
    }
});

以及触发动作的图像的HTML：

<img class="tio-enable" name="Test Feature" src="/image.png">

如果我删除jQuery并简单地在document.ready上加载JavaScript，那么事件处理程序每次鼠标单击只触发一次，而jQuery则触发两次。我无法删除jQuery，因为我需要使用AJAX

$(".tio-enable").off().on('click', function(){
 // your code here
});

使用此代码，而不是遍历所有元素并附加事件

希望这有帮助

使用此代码，而不是遍历所有元素并附加事件

---

希望这有帮助

如何判断它们被触发了两次？在分配单击处理程序的循环中放置一条控制台日志消息。我怀疑你会看到它被执行了两次，还有其他地方触发了它。我在事件侦听器循环中放置了一个控制台日志，它确实被触发了两次。也许你有两个元素，带有

class=“tio enable”

…我在循环中添加了一个检查，以确保它只运行一次，但它无法阻止事件侦听器被复制。然后，我尝试使用

removeEventLister（）

删除额外的侦听器，但这不起作用，事件继续触发两次。但是，我注意到，如果在循环中使用

addEventLister（）

，它将触发两次，如果在循环中使用

removeeventlister（）

，它将触发一次。这至少表明这不是由重复的元素引起的，因为如果是这种情况，两个元素都会触发两次。如何判断它们被触发两次？在分配单击处理程序的循环中放置控制台日志消息。我怀疑你会看到它被执行了两次，还有其他地方触发了它。我在事件侦听器循环中放置了一个控制台日志，它确实被触发了两次。也许你有两个元素，带有

class=“tio enable”

…我在循环中添加了一个检查，以确保它只运行一次，但它无法阻止事件侦听器被复制。然后，我尝试使用

removeEventLister（）

删除额外的侦听器，但这不起作用，事件继续触发两次。但是，我注意到，如果在循环中使用

addEventLister（）

，它将触发两次，如果在循环中使用

removeeventlister（）

，它将触发一次。这至少表明它不是由重复元素引起的，因为如果是这样，两个元素都会触发两次。

$(".tio-enable").off().on('click', function(){
 // your code here
});