2012-01-23 4 views
1

私のjqueryで使用するクラス "ajaxem"を持つhtml要素があります。私はどのフォーム要素にも同じことがあります。最初のいくつかのAjaxリクエストでは、jqueryがアタッチされ、トリガーされ、正常に動作します。ただし、ユーザーがログインまたは登録すると、返されたリンク(class = "ajaxem"も含む)はjqueryによって捕捉されず、トリガーされません。jQueryを使用していくつかのajaxリクエストの後にlive()、delegate()、およびon()が機能しなくなる

私は3つの実装をすべて試しました。各Ajaxリクエスト後に再適用しようとしました。どれも働いていません。

<script type="text/javascript"> 
function updateajaxem() { 


    $(document).on("click", "a.ajaxem", function (e) { 
     e.preventDefault(); 

     var action = $(this).attr('href'); 
     //alert(action); 
     if (action.indexOf('register') > 0) { 

      $("div#logininfo").load("http://localhost/testrun/auth/register/").fadeIn(); 

     } else if (action.indexOf('password') > 0) { 
      $("div#logininfo").load("http://localhost/testrun/auth/forgot_password/").fadeIn(); 

     } 

    }); //end 
} 
</script> 
<script type="text/javascript"> 
updateajaxem(); 

//$("a.ajaxem").live("click", function(e){ 

$(document).on("click", "input:submit", function (e) { 
    e.preventDefault(); 

    var formaction = $(this).closest('form').attr('action'); 
    var dataString = $(this).closest('form').serialize(); 
    alert(dataString); 
    //$("div#logininfo").load(formaction,data); 
    $.ajax({ 
     type: "POST", 
     url: formaction, 
     data: dataString, 
     // dataType: "json", 
     success: function (data) { 
      alert(data); 

      $("div#logininfo").html(data); 
      updateajaxem(); 


     } // end of success 
    }); 





}); 
</script> 

スクリプトが動作を停止した時に出力されたHTML

は以下の通りです:それはjqueryのでキャッチではなく、あるべきであるクラス「ajaxem」が含まれているため、意味がありません

<div id="container"> 
    <h1>Welcome to CodeIgniter!</h1> 
<a href="auth/logout/">Logout</a> <a href="">Home</a> 
    <div id="body"> 
     <p>The page you are looking at is being generated dynamically by CodeIgniter.</p> 

     <p>If you would like to edit this page you'll find it located at:</p> 
     <code>application/views/welcome_message.php</code> 

     <p>The corresponding controller for this page is found at:</p> 
     <code>application/controllers/welcome.php</code> 

     <p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p> 
    </div> 

    <p class="footer">Page rendered in <strong>1.0343</strong> seconds</p> 
    <div id="logininfo">You have successfully registered. <a href="http://localhost/testrun/auth/login" class="ajaxem">Login</a></div> 
</div> 

答えて

0

返さリンクのhrefは、言葉はどちらも、以下の条件の「登録」または「パスワード」が含まれていませんので、満たされている:

if (action.indexOf('register') > 0) { 
    $("div#logininfo").load("http://localhost/testrun/auth/register/").fadeIn(); 
} else if (action.indexOf('password') > 0) { 
    $("div#logininfo").load("http://localhost/testrun/auth/forgot_password/").fadeIn(); 
} 

ので、何のAJAX要求は起こりません。

あなたは、彼らがクリックされたアンカーから抽出することができるURLおそらく

} else if (action.indexOf('login') > 0) { 
    $("div#logininfo").load("http://localhost/testrun/auth/login/").fadeIn(); 
} 

:例えば、「ログイン」のシナリオを説明するために必要な...と、なぜハードコードされますか?

if (action.indexOf('register') > 0) { 
    $("div#logininfo").load(this.href).fadeIn(); 
} else if (action.indexOf('password') > 0) { 
    $("div#logininfo").load(this.href).fadeIn(); 
} else if (action.indexOf('login') > 0) { 
    $("div#logininfo").load(this.href).fadeIn(); 
} 
+0

また、最終的なif/elseifステートメントのブランチにも似ていることがあります。もっと先にリファクタリングしてください! ;-) – Chris

+0

@Chris - 合意。 switch/caseおそらく正規表現。 – karim79

+0

私は実際には、if文がすべてのブランチがあなたのサンプルコードで同じことを少なくとも行うことを考えると、余計なものであると考えていました。もちろん、 "else"では何もしませんが、 '$(" div#logininfo ")だけを使用して' if'チェック全体を削除するかどうかはわかりません。load(this.href).fadeIn ); 'それは良くないかもしれない... – Chris

関連する問題