从外部源加载脚本时，“return false”不适用于 jQuery post 表单提交

Question

我有这两种形式：

<form id='EnableBackgroundCrossfadeForm' action='BgCFenable.php' method='post'>
    <input id='BgCFenable' class='DisableD_Button' type='submit' value='Enable'>
</form>

和：

<form id='DisableBackgroundCrossfadeForm' action='BgCFdisable.php' method='post'>
    <input id='BgCFdisable' class='DisableButton' type='submit' value='Disable'>
</form>

这是外部POST.js 文件：

$("#BgCFdisable").click(function(){

    $("#BgCFLog").animate({"max-height":"100px"}, 300);
    $("#BgCFLog").html("<img src='Resources/Images/Loader02.gif'/>");

    $.post($("#DisableBackgroundCrossfadeForm").attr("action"),
               $("#DisableBackgroundCrossfadeForm").serializeArray(),
               function(data){
                    if(data == "DISABLED"){
                        $("#BgCFLog").html("Background Crossfading disabled!");
                        $( "#BgCFdisable" ).attr("disabled", "disabled");
                        $( "#BgCFdisable" ).switchClass( "DisableButton", "DisableD_Button", 1000, "easeInOutQuad" );
                        $( "#BgCFenable" ).removeAttr("disabled");
                        $( "#BgCFenable" ).switchClass( "DisableD_Button", "EnableButton", 1000, "easeInOutQuad" );
                    }
               });
    $("#DisableBackgroundCrossfadeForm").submit(function(){
        return false;
    });
});

$("#BgCFenable").click(function(){

    $("#BgCFLog").animate({"max-height":"100px"}, 300);
    $("#BgCFLog").html("<img src='Resources/Images/Loader02.gif'/>");

    $.post($("#EnableBackgroundCrossfadeForm").attr("action"),
               $("#EnableBackgroundCrossfadeForm").serializeArray(),
               function(data){
                    if(data == "ENABLED"){
                        $("#BgCFLog").html("Background Crossfading enabled!");
                        $( "#BgCFdisable" ).removeAttr("disabled");
                        $( "#BgCFdisable" ).switchClass( "DisableD_Button", "DisableButton", 1000, "easeInOutQuad" );
                        $( "#BgCFenable" ).attr("disabled", "disabled");
                        $( "#BgCFenable" ).switchClass( "EnableButton", "DisableD_Button", 1000, "easeInOutQuad" );
                    }
               });
    $("#EnableBackgroundCrossfadeForm").submit(function(){
        return false;
    });
});

主要的想法是，如果我将脚本放在<script></script> 标记之间的INDEX.php 文件的末尾（我有表格）在body 之间，那么这项工作就完美了。换句话说，这仅在 jQuery 脚本是“内部”且未从外部 *.js 文件加载时才有效。

如果在外部加载，提交表单会将我重定向到BgCFenable.php/BgCFdisable.php，而不是留在我需要显示结果数据的INDEX.php 页面上。

我怎样才能使这项工作在外部加载脚本而不在提交时重定向？

Answer 1

最后我想通了。 这些是表格：

<form id='EnableBackgroundCrossfadeForm' onsubmit='return EnableBGCF();'>
    <input id='BgCFenable' class='DisableD_Button' type='submit' value='Enable' disabled='disabled'>
</form>

和：

<form id='DisableBackgroundCrossfadeForm' onsubmit='return DisableBGCF();'>
    <input id='BgCFdisable' class='DisableButton' type='submit' value='Disable'>
</form>

这是外部 .js 文件：

function EnableBGCF() {
    $("#BgCFLog").animate({"max-height":"100px"},300);
    $("#BgCFLog").html("<img src='Resources/Images/Loader02.gif'/>");

    $.ajax({type:'POST', url: 'BgCFenable.php', data:$('#EnableBackgroundCrossfadeForm').serialize(), success: function(response) {
        $('#BgCFLog').html("Background Crossfading <span style='color: #c9e52d'>enabled!</span>");
        $( "#BgCFdisable" ).removeAttr("disabled");
        $( "#BgCFdisable" ).switchClass( "DisableD_Button", "DisableButton", 1000, "easeInOutQuad" );
        $( "#BgCFenable" ).attr("disabled","disabled");
        $( "#BgCFenable" ).switchClass( "EnableButton", "DisableD_Button", 1000, "easeInOutQuad" );
    }});

    return false;
}

function DisableBGCF() {
    $("#BgCFLog").animate({"max-height":"100px"},300);
    $("#BgCFLog").html("<img src='Resources/Images/Loader02.gif'/>");

    $.ajax({type:'POST', url: 'BgCFdisable.php', data:$('#DisableBackgroundCrossfadeForm').serialize(), success: function(response) {
        $('#BgCFLog').html("Background Crossfading <span style='color: #e52d58'>disabled!</span>");
        $( "#BgCFdisable" ).attr("disabled","disabled");
        $( "#BgCFdisable" ).switchClass( "DisableButton", "DisableD_Button", 1000, "easeInOutQuad" );
        $( "#BgCFenable" ).removeAttr("disabled");
        $( "#BgCFenable" ).switchClass( "DisableD_Button", "EnableButton", 1000, "easeInOutQuad" );
    }});

    return false;
}

现在它正在工作。无论如何感谢您的帮助！

Answer 2

您需要传递点击事件并防止默认，因此表单不会提交..

所以，开始：

$("#BgCFdisable").click(function(){...

你需要做的：

$("#BgCFdisable").click(function(e){
    e.preventDefault();...

相同，在：

$("#BgCFenable").click(function(){...

你需要做的：

$("#BgCFenable").click(function(e){
    e.preventDefault();...