$ .ajax在此脚本中干扰.hide()和.show()Jquery

时间:2012-05-22 23:15:06

标签: javascript jquery html

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

2 个答案:

答案 0 :(得分:3)

这一行:

$("#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发布到您的服务器,并且,正如上面所说的那样,您错过了URL周围的引号。

答案 1 :(得分:1)

显而易见的原因是您的Javascript出错导致整个部分无法执行。快速查看代码会显示以下行:

        url: /blah/blah.asp,

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

        url: "/blah/blah.asp",