Javascript $.ajax会干扰此脚本中的.hide（）和.show（）Jquery

（在Firefox和IE9中，它不起作用。在Chrome中，它起作用）

如果删除ajax，隐藏/显示JQuery就可以工作。有什么解决办法吗

<form id="ppform" action="blah.asp" method="post">
<div id="saleload">Blah</div>
<button id="sendbutton">Send</button>
</form>

$(document).ready(function(){

    $('#saleload').hide();

    $('#sendbutton').click(function() {

        $('#saleload').show();

        $.ajax({
            type: "POST",
            url: /blah/blah.asp,
            data: reqBody,
            dataType: "json",
            success:function(data,textStatus){ 

                if (data.redirect) {
                   window.location.href = data.redirect;
                }else{
                    $("#ppform").replaceWith(data.form);
                }
             }
        });
    }); 
});

废话
发送
$（文档）.ready（函数（）{
$（'#saleload'）.hide（）；
$（“#发送按钮”）。单击（函数（）{
$（'#saleload'）.show（）；
$.ajax({
类型：“POST”，
url:/blah/blah.asp，
数据：reqBody，
数据类型：“json”，
成功：函数（数据、文本状态）{
if（data.redirect）{
window.location.href=data.redirect；
}否则{
$（“#ppform”）.replace为（data.form）；
}
}
});
}); 
});

显而易见的原因是Javascript中存在错误，导致整个部分无法执行。快速浏览您的代码可以看到这一行：

        url: /blah/blah.asp,

字符串需要用引号括起来：

        url: "/blah/blah.asp",

---

显而易见的原因是Javascript中存在一个错误，导致整个部分无法执行。快速浏览您的代码可以看到这一行：

        url: /blah/blah.asp,

字符串需要用引号括起来：

        url: "/blah/blah.asp",

这一行：

$("#ppform").replaceWith(data.form);

正在使用Ajax请求的响应替换整个表单内容。这意味着您设置的单击处理程序也将消失，因为

#sendbutton

将消失。即使在

data.form

中有另一个具有相同ID的按钮，它也不会工作。您必须改用事件委派：

$(document).ready(function(){
    $('#saleload').hide();
    $(document).on('click', '#sendbutton', function(){
        $('#saleload').show();
        $.ajax({
            type: "POST",
            url: "/blah/blah.asp",
            data: reqBody,
            dataType: "json",
            success:function(data,textStatus){ 
                if (data.redirect) {
                   window.location.href = data.redirect;
                } else {
                    $("#ppform").replaceWith(data.form);
                }
             }
        });
    }); 
});

另外：您似乎正在向服务器发布一个未定义的变量

reqBody

，正如lonesomeday上面所说，您在URL周围缺少引号。

这一行：

$("#ppform").replaceWith(data.form);

正在使用Ajax请求的响应替换整个表单内容。这意味着您设置的单击处理程序也将消失，因为

#sendbutton

将消失。即使在

data.form

中有另一个具有相同ID的按钮，它也不会工作。您必须改用事件委派：

$(document).ready(function(){
    $('#saleload').hide();
    $(document).on('click', '#sendbutton', function(){
        $('#saleload').show();
        $.ajax({
            type: "POST",
            url: "/blah/blah.asp",
            data: reqBody,
            dataType: "json",
            success:function(data,textStatus){ 
                if (data.redirect) {
                   window.location.href = data.redirect;
                } else {
                    $("#ppform").replaceWith(data.form);
                }
             }
        });
    }); 
});

---

另外：您似乎正在向服务器发布一个未定义的变量

reqBody

，正如lonesomeday在上面所说的，您在URL中缺少引号。

是

#saleload

内部

#ppform

？@bfavaretto:很可能就是这个问题。是的。它位于#ppform的表单容器中，当您替换HTML时，您也会删除事件处理程序。在运行时更改HTML时，对事件处理程序使用jquery.on（）而不是.bind（）。请看以下答案：是

\saleload

内部

\ppform

？@bfavaretto:很可能是问题所在。是的。它位于#ppform的表单容器中，当您替换HTML时，您也会删除事件处理程序。在运行时更改HTML时，对事件处理程序使用jquery.on（）而不是.bind（）。请看下面的答案：上面的注释重新替换元素也与使代码正确运行有关。但是，如果没有这个更改，您的代码将根本无法运行。Thanks@Patriotec，这将解决您的第一个问题（记住下次查看javascript控制台！）。现在你将面临一些新的挑战。请参阅我的答案。上面关于重新替换元素的注释也与使代码正确运行有关。但是，如果没有这个更改，您的代码将根本无法运行。Thanks@Patriotec，这将解决您的第一个问题（记住下次查看javascript控制台！）。现在你将面临一些新的挑战。请看我的答案。是的，这解决了代码的真正问题：在运行时更新HTML时动态事件处理。@frenchie，感谢您的支持。是的，这解决了其中一个问题，但lonesomeday指出的问题并不那么“真实”。似乎OP甚至没有机会遇到我们刚才讨论的问题，语法错误阻止了ajax调用的运行。很抱歉，没有看到您的帖子。寂寞是很快的。我相信你的代码解决了我所有的问题。是的，这解决了代码的真正问题：在运行时更新HTML时动态事件处理。@frenchie，谢谢你的支持。是的，这解决了其中一个问题，但lonesomeday指出的问题并不那么“真实”。似乎OP甚至没有机会遇到我们刚才讨论的问题，语法错误阻止了ajax调用的运行。很抱歉，没有看到您的帖子。寂寞是很快的。我相信你的代码解决了我所有的问题。