jquery调用event.preventDefault 之后依然有 submit事件改变 浏览器的address_bar

sengw 发布于 2016/07/22 11:37
阅读 206
收藏 0

 


下面是login 和logout 的代码 , login的时候 一切正常,地址栏没有改变 , 但是在logout之后 再次login 就会出现浏览器的地址栏 被加上了 submit 的form 信息比如  /?csr=fwewfee &username=xxx&password=xxx/

请问为什么第二次 logout会出现这种情况 

会不会是由于我调用 $("#login_form").html(... ) 反复重写 元素导致的问题 ? 

{% load bootstraptags %}
<form id="login_form" action="" role="form" >
   {% csrf_token %}
  {% for field in form %}
  <div class="form-group" >
    {{ field.label }}
    <br>
    {{ field|addInputCSS:"form-control" }}
  </div>
  {% endfor %}
  <div class="form-group" >
    <button type="submit" class="btn btn-default">Submit</button>
  </div>
</form>
<script>
$(document).ready( function () {
$("#login_form").submit( function( e ) {
    console.log("-------- POST login form=====" );
    $.ajax( { type: "post",
      url: "/accounts/login/",
      data: $(this).serialize(),
      success: function ( data ) {
        console.log( "get POST return data:\n")
        console.log( data )
        $("#login_form").html( data );
        return false;
      },
      error: function( data ) {
        $(this).html( data );
      }
      }
      );
    return false;
    }
  ); 
} );
</script>
   
=============================

 Well Come Back {{ username }}

  <br>


  <button type="button" class="btn btn-link" id="id_logout_button" >logout
  </button>


  <h4> My Buddy </h4>
  <div id="id_buddylist_div">  </div>


<script>
$(document).ready( function () {
    $("#id_logout_button").click( function( event ){
      event.preventDefault();
      $.get( "/accounts/logout/", function( data, status ){
        console.log( "logout status");
        console.log( status );
        console.log( "logout data" );
        console.log( data );
        $("#id_logout_button").parent().html( data );
        });});
      $("id_buddylist_div").load( "/buddylist/" );
    });
</script>


加载中
1
b
beastxiao
第一次没出错,是因为你绑定了事件,然退出$("#id_logout_button").parent().html( data )应该是把div里面替换成Form了?这样导致新的Form的submit事件已经不起作用了,所有你再次点击就是Form的默认提交方式,get提交,所以浏览器url出现了你所说的。要不出bug,可以把事件绑定在父级,或者$("#id_logout_button").parent().html( data )后面把你$("#login_form").submit(...)整块代码在拷贝一份过来。
0
sengw
sengw

引用来自“beastxiao”的评论

第一次没出错,是因为你绑定了事件,然退出$("#id_logout_button").parent().html( data )应该是把div里面替换成Form了?这样导致新的Form的submit事件已经不起作用了,所有你再次点击就是Form的默认提交方式,get提交,所以浏览器url出现了你所说的。要不出bug,可以把事件绑定在父级,或者$("#id_logout_button").parent().html( data )后面把你$("#login_form").submit(...)整块代码在拷贝一份过来。
谢谢大牛 的确是这样 ? 第二次login返回的form没有被注册submit处理函数
返回顶部
顶部