Question

使用事件侦听器和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);
    }
});

PHP：

function bpnsc_tio_enable() {

    $path = $_POST['path'];
    echo $path;
    die();
}

add_action( 'wp_ajax_bpnsc_tio_enable', 'bpnsc_tio_enable');

以及图片的HTML从触发操作：

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

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

Answer 1

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

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

希望这会有所帮助。

事件监听器在与jQuery一起使用时触发两次

1 个答案: