1

私の問題を次のトピックの方法で提示します。事前に読んでください。

関数：

$("#someAJAXContainer").load("someHTML.html");

コンテキスト: 開始ページを 1 つだけにしたいので、すべてのコンテンツが動的に読み込まれる中央に div を追加します。マスター ページと非常によく似ています (同じではないにしても)。

...
<body>
<div id='menu'></div>

<div id='someAJAXContainer'></div>
<button>loadAjaxDiv</button>

<div id='footer'></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery-ui.min.js">    </script>
<script src="functions.js></script>
</body>
...

functions.js は次のようになります。

$(document).ready(function(){
   $("#someAJAXContainer").load("someHTML.html");
   $("button").button();
   $("#responseA").click(function(event){
     alert("the link should no longer took you to jquery.com");
     event.preventDefault();
   });
 });

問題: AJAX 応答 HTML がコンテナーにロードされると、既存の JQuery コードにリンクされません。したがって、応答が次のような場合:

<div id ='response'>
<a id = 'responseA' href="http://jquery.com/">jQuery</a>
</div>

リンクは、同じようにjquery.comページに移動します:(

したがって、これを解決するための私のアプローチは（functions.jsで）使用しています：

$("#someAJAXContainer").load("someHTML.html", function() {
    $("#responseA").click(function(event){
         alert("the link should no longer took you to jquery.com");
         event.preventDefault();
       });
});

しかし今、私は複数レベルの内部 ajax を持っており、コードが乱雑になっています! 私はそれがうまくいっている方法があまり好きではありません。だから私はここでどんな種類のエラーをしているのだろうか. これは、構造的、適切な実践、レベルでも正しいですか?

私が問題について明確であることを願っています。私はそれについてグーグルで調べていましたが、私が得た唯一の答えは以前に提案されたものと似ていましたが、それはすべて非常に曖昧でした.

よろしく;

4

2 に答える 2

0

liveを使ってみてください。

  $("#responseA").click(function(event){
     alert("the link should no longer took you to jquery.com");
     event.preventDefault();
  });

これにより、開始時に DOM にある #responseA 要素にのみクリック イベントがバインドされますが、後で読み込むその他の要素では機能しません。ライブはこれを解決します

  $("#responseA").live('click', function(event){
      ...
  });
于 2011-09-27T22:39:53.973 に答える
0

RealShadow を補完します。返信で述べたように、.live()要素のプロパティや動作を変更したい場合の問題は解決されず、イベント リスナーをアタッチすることしかできないことがわかります。

したがって、ボタン タグをボタンとして動作させようとするような状況では、たとえば次のようになります。

<div id='response'><buttonOK>ok</buttonOK></div>

私がより興味深いと思った解決策は、.ajaxStop()or.ajaxSuccess()イベントリスナーを追加することです。これは$(document).ready(function() {})AJAX 呼び出しの として機能するため、すべての AJAX.ready() をこれに設定できます。識別子 $("#ajaxContainer") が、新しく生成された子 DOM を見つけることができるように、HTML 応答が読み込まれるコンテナーを指している必要があることを考慮する必要があります。

$("#ajaxContainer").ajaxStop(function() {
        // Ajax handler called.
        $("buttonOK").button();
        });
于 2011-09-28T10:53:05.180 に答える