Jquery preventDefault(return false;)并不总是有效

Jquery preventDefault(return false;) doesnt work always

本文关键字:有效 preventDefault return false Jquery      更新时间:2023-09-26

我有这段代码,我不能一直阻止默认链接事件。它90%的时候都能正常工作,但剩下的10%我的代码没有运行,没有收到错误消息,并在我的url末尾加上一个#。我在a标签的href上有#。

我使用.on()是因为有时元素是在文档准备好之后加载的。我使用.off()是因为在我使用它之前,有时当我点击它时会触发不止一次。奇怪的部分是有时。我不明白一个代码有时能工作,有时不能。不应该一直都是一样的结果吗?

很抱歉收到这么多评论。

这是我完整的jquery代码:

//Handle box opening and closing
var boxcontent_width = $(".box-content").css("width");
$(".boxarrow").addClass("done");
$(document).on("click",".boxarrow", function(event){
    var serial = $(this).parent().parent().attr("serial");
    var clink = $(document).find("[comment-link='"+serial+"']");
    if(clink.hasClass("open")){
        clink.click();
    }
    if($(this).hasClass("done")){
        $(this).removeClass("done");
        $(document).find("#comment-box"+$(this).parent().parent().attr("serial")).slideUp(250);
        if($(this).parent().parent().find(".box-content").is(":hidden")){
            $(this).attr("src","source/up_arrow.png");
        }else{
            $(this).attr("src","source/down_arrow.png");
        }
        $(this).parent().parent().find(".box-content").slideToggle(500,function(){
            $(this).parent().find("div img").addClass("done");
        });            
    }
    return false;
}); 
//Handle votes
$(document).on("click","#positive-button, #negative-button", function(event){
    var serial = $(this).parents(".tutorial-box").attr("serial");
    var vote = 0;
    if($(this).attr("id") == "positive-button"){
        vote = 1;   
    }
    $.post("vote.php",{
        php_tutorial_id: serial,
        php_vote_value: vote
    },function(data){
        if(data.localeCompare("error") && data){
            if(data > 9999)data = 9999;
            if(data < -9999)data = -9999;
            if(data > 0){
                data = "+"+data;
            }
            $("#tutorial-vote"+serial+" p").fadeOut(250, function(){
                $("#tutorial-vote"+serial+" p").html(data).fadeIn(250);
            });
        }
    });
    return false;
});
//Handle comment opening and closing
$(document).on("click",".showcomments", function(event){
    if($(this).hasClass("open")){
        $(this).html("<p>Show comments</p>");
        $(this).removeClass("open");
    }else{
        $(this).html("<p>Hide comments</p>");
        $(this).addClass("open");
    }
    var clink = $(this).attr("comment-link");
    var is_open = $(this).hasClass("open");
    $(this).parents().find("#"+clink).slideToggle(500);
    return false;
});
//Handle add comment button
$(document).on("click",".comment-button", function(event){
    var serial = $(this).attr("serial");
    serial = "#comment-box"+serial;
    $(document).find(".comment-box").not(serial).slideUp(250);
    $(document).find(serial).slideToggle(250);
    return false;   
});
$(document).on("click",".comment-box-submit", function(event){  
    var tutorial_id = $(this).parent().attr("serial");
    var comment_text = $(this).parent().find(".comment-box-area");
    var serial = $(this).parent().attr("serial");
    $.post("send_comment.php",{
        php_tutorial_id: tutorial_id,
        php_comment_text: comment_text.val()
    },function(data){
        $(document).find("#comment-response"+serial).fadeOut(500, function(){
            if(data){
                $(document).find("#comment-response"+serial).html(data);
                $(document).find("#comment-response"+serial).fadeIn(500);
            }else{
                $(document).find("#comment-response"+serial).html("");
                $.post("reflesh_comments.php",{
                    php_tutorial_id: tutorial_id
                },function(data){
                    if($(document).find("#"+tutorial_id).is(":hidden")){
                        $(document).find("#"+tutorial_id).html(data);
                    }else{
                        $(document).find("#"+tutorial_id).fadeOut(500, function(){
                            $(document).find("#"+tutorial_id).html(data);
                            $(document).find("#"+tutorial_id).fadeIn(500);  
                        });
                    }
                });
                $(document).find("#comment-response"+serial).html("");
                comment_text.val("");
            }   
        });     
    }); 
    return false;
});
$(document).on("click",".comment-remove", function(event){  
    var serial = $(this).attr("serial");
    var tutorial_serial = $(this).parent().parent().parent().attr("id");
    $("#overlay-box").load("overlay_boxes/remove_comment.php", { php_serial: serial, php_tutorial_serial: tutorial_serial }, function(){
        $("#overlay-box").fadeIn(250);
        $("#overlay").fadeIn(250);
    });
    return false;
});

$(document).on("click",".comment-reply", function(event){
    var serial = $(this).parent().parent().attr("serial");
    var owner = $(this).parent().parent().find(".comment-owner").html();
    var owner_id = $(this).attr("serial");
    $(document).find("#comment-box"+serial).find(".comment-response").hide();
    $(document).find("#comment-box"+serial).slideDown(250); 
    $(document).find("#comment-box"+serial).find(".comment-box-area").val("@"+owner+": ");
    $(document).find("#comment-box"+serial).find(".comment-box-area").focus();
    return false;
});
$(document).on("click",".comment-report", function(event){  
    var serial = $(this).attr("serial");
    var tutorial_serial = $(this).parent().parent().parent().attr("id");
    $("#overlay-box").load("overlay_boxes/report_comment.php", { php_serial: serial }, function(){
        $("#overlay-box").fadeIn(250);
        $("#overlay").fadeIn(250);
    });
    return false;
});

您显然有很多问题,其中一些问题我们无法解决,因为您没有包含相关的代码。

  • 您的javascript代码有时会附加事件处理程序?执行不止一次
  • 您正在将事件附加到运行时可能不存在的元素(插入时是否正在执行附加代码的事件处理程序?)
  • 您正在不加区分地删除所有事件处理程序,可能是非您自己的事件

第二个和第三个问题很容易。不要使用

$(".comment-remove").off().on("click", function(event){ 

使用

$(document).on('click','.comment-remove',function(event){

我还建议不要使用串行属性,而是使用数据串行,并且不要使用var tutorial_serial = $(this).parent().parent().parent().attr("id");,而是使用更易于维护的var tutorial_serial = $(this).closest('.tutorial').attr("id");

删除锚上的href属性以防止其在您的url:末尾添加#

<a href="#" serial="'.$data_id.'" class="comment-remove" '.$hidden_remove.' >Remove</a>

我建议使用:

$("body").on("click",".comment-remove",function(){...})

为了防止事件触发不止一次,因为您在主体上设置了一次侦听器,而不是打开,根据需要,可以或不能将其分配给您的ID,这取决于该行运行时DOM中是否存在该元素。