html - JavaScript 事件绑定只能执行一次了，再次点击就变得无效 ，求助怎么回事

问题描述

问 题

点击收藏，弹出提示框，询问是否取消收藏，然后点击提示框里面的关闭按钮，关闭提示框后。再次点击那个触发事件的 收藏按钮就会无效 图片描述

var collectionBtn = document.querySelectorAll('.collection-center .collection-shouc');

var Ceng = "<div id='alert' class='alert'><div class='alert-k'><div class='alert-k-close'>×</div><a class='yes' href='javascript:;'>确定</a><a class='no'  href='javascript:;'>取消</a></div></div>";

for(var i = 0; i<collectionBtn.length; i++){
    collectionBtn[i].addEventListener('click',addEvent,false);
}

function addEvent(){
        if(document.querySelector('#alert')){
            shows();
        }else{
            document.body.innerHTML += Ceng;
            shows();
        }
    }

function shows(){
    var ale   = $('.alert');
    var ale_k =  ale.find('.alert-k');
    ale.show(500);
    ale_k.slideDown(200);
    hides();
    
}
function hides(){
    var ale = $('.alert');
    $('.alert-k').on('click', '.alert-k-close', function(){
        $(this).parent().slideUp(200);
        $(this).parent().parent().hide(500);
    });
}

解决方案

1. 按钮确定取消效果反了. 确定就是确定操作, 取消就是单纯隐藏这个confirm的div

2. 我猜你重新生成了一个按钮, 这样之前绑定的事件就和之前的按钮一起被销毁了
   解决方法:

            1> 绑定的时候用 $("document").on("click", ".某元素" , function(){});
            2> 或者只用这一个元素就可以了, 没有必要重新生成一个按钮

这篇关于html - JavaScript 事件绑定只能执行一次了，再次点击就变得无效 ，求助怎么回事的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！