"；return false”；不会'；当脚本从外部源加载时，jQuery后表单提交不起作用 - "return false" doesn't work for jQuery post form submission when script is loaded from external source

我有这两种形式：

<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;
    });
});

主要的想法是，如果我把脚本放在body中INDEX.php文件（我有表单）末尾的<script></script>标记之间，这将是完美的。换句话说，只要jQuery脚本是"内部"的，并且不是从外部*.js文件加载的，这就可以工作。

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

如何在不重定向提交的情况下从外部加载脚本？

我最终想明白了。这些是表格：

<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;
}

现在它开始工作了。无论如何，谢谢你的帮助！

您需要传入点击事件并阻止默认值，这样表单就不会提交。。

因此，开启：

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

你需要做：

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

相同，在：

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

你需要做：

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