2009-03-27 10 views
1

本当に誰かがこの問題を解決できることを願っています。最初のページでうまく動作するAjaxページネーションスクリプトがありますが、クリックイベントはページングの他のページでは機能しません。ajaxページング後にクリックイベントが機能しない

jQueryのスクリプト

<script type="text/javascript"> 
// prepare when the DOM is ready 
$().ready(function() { 
//popup div 
$(".wsbutton_pop").click(function(e){ 
//getting height and width of the message box 

     var height = $('#popuup_div').height(); 
     var width = $('#popuup_div').width(); 
     //calculating offset for displaying popup message 
     leftVal=e.pageX-(width/2)+"px"; 
     topVal=e.pageY-(height/2)+"px"; 
     //show the popup message and hide with fading effect 
     $('#popuup_div').css({left:leftVal,top:topVal}).show(); 
     $('#popuup_div').html("<img src='images/ajaximg.gif' border='0'>"); 

     $.ajax({ 
      type: "get", 
      url: $(this).attr("href"), 
      success: function(r){ 
      $('#popuup_div').html("") 
      $('#popuup_div').prepend(r); 
      } 
    }); 

    }); 

//close div on mouse click 

$(".popup_msg").click(function(e){ 
     $('#popuup_div').fadeOut(); 
    }); 

}); 
</script> 

別のページのコンテンツをdiv要素をポップアップする必要があります。

は、これは私がそれを設定している方法です。

は今私のリンクは: 最初のページに素晴らしい作品が、私はまったく同じページのリンクを持っている2を訪問するためにクリックしたときに、今の問題がある <a href="http://mysite.com/file.php?content=1" class="wsbutton_pop">Load content</a>

、リンクはもう動作しません。

メモとして、私のページは、ID = "ページング"でdivにロードする必要があります。 AJAXページング自体はうまくいきます。結果として得られるページのjqueryクリックイベントは機能しません。スクリプトの再バインドが必要だと思うかもしれませんが、それを達成する方法はわかりません。

ありがとうございました。

答えて

7

クリックイベントがバインドされなくなるように、ページ設定のリンクを上書きしていると思います。 jquery 1.3を使用している場合は、live eventsを使用してこれを修正できます。

$(".wsbutton_pop").live("click", function(e) { ... 

以前のバージョンのjQueryを使用している場合は、新しいページデータを戻すときにイベントハンドラを再接続することができます。

+0

ありがとう。これは素晴らしいです。 –

+0

これはjQuery 2.xでも使えますか? – user2636556

0

あなたの説明では、.wsbutton_popを含む新しいページを生成しているようです。その場合は、onclick関数をアタッチする必要があります。最初のスクリプトは最初のロード時にのみ実行されるため、登録はその時点で存在する.wsbutton_popに対してのみ行われます。

1

スクリプトの再バインドについては正しいです。その理由は、ページ上の要素がajaxポストバック中に再作成されるためです。

あなたはこのように(クリック用)ライブイベントを使用することができますjQueryの1.3以上を使用している場合:変更、ぼかし、フォーカス、MouseEnterイベント:イベントを生きる

$(".wsbutton_pop").live("click", function(e){ 
    ... 
}); 

注意は次のイベントでは動作しません。 、mouseleave、およびsubmitを実行します。

あなたはjQueryの1.3を使用していない、またはあなたが上記のイベントのいずれかを使用する必要がある場合は、メモリリークを回避するために、次の資料にアドバイスに従ってください:あなたは唯一の初期に結合されている Code-Project Article

0

。 wsbutton_pop要素。 これらが削除され、クラス.wsbutton_popの新しい要素が追加されると、一度接続したクリックイベントハンドラを自動的に受け取ることはありません。あなたが探しているもの

は、ページ上の現在.wsbutton_popのすべてのインスタンスに適用されます

$(".wsbutton_pop").live("click", function(e) {...}); 

、および作成されますそのいずれかです。

- = - = - = - = - = - = - = - = - = - 私はこれを書いたとして

他の回答が来た私たちはブライアン・フィッシャーのポストのマッシュアップを取得する場合、私が言うと思いますJimmie R. Houtsの答えは最高です。おそらく$(..)を使用している場合、現在DOMにある要素だけがイベントハンドラを受け取ると言及します。click(...)

関連する問題