ラージャーページ区切りで、委任されたイベントハンドラにバインドされたAjaxロードボタンが複数回発生します

Question

これは興味深い問題です。私はホームページがいくつかのタブ付きdiv要素で構成されているWebアプリケーションを持っています。各タブ付きのdiv内では、AJAXを介して異なるページが読み込まれ、スムーズなユーザーインターフェースとワークフローが可能になります。私はLaravelページネーションに問題があります。既定のリダイレクトを防ぐために設計した関数は、意図したとおりに動作しますが、AJAXが読み込まれるたびに、それが追加のonclickイベントを追加するようです。以下は、私が意味するもののスクリーンショットです。

ネットワークパネルに表示されているように、ページ設定リンクのクリックごとに複数の火災が発生します。数回クリックするだけですべて成功したページが返されますが、これはパフォーマンスを著しく低下させます。なぜこれが起こっているのかについての洞察がありがたいです。

以下は、イベントハンドラとそれが呼び出す関数の両方を割り当てるために使用するJavascriptです。私は既に方法論に.off - >。を使用していることに気づくでしょう。

function myPages(origin,div_tag) //origin is an identifier of where the pagination links live 
 
//div_tag indicates where the resultant page will be output to. 
 
{ 
 
    mydata={tag: div_tag}; 
 
    $(origin).off('click','.pagination a',mydata, directPages); 
 
    $(origin).on('click','.pagination a',mydata, directPages); 
 
} 
 
//event handles are passed the event always, any additional data included is passed 
 
// as a property (i.e. event.data). 
 
function directPages(e) 
 
{ 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    var url=$(this).attr('href'); 
 
    var tag = e.data.tag; 
 
    loadComponent(url,tag); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<script> 
 
    //The first argument defines the parent element used in 
 
    //delegating the event handler to the child elements. The 
 
    //second identifies the element into which the resulting 
 
    //html code that is return will be rendered. 
 
    myPages("div.mysources","#sources"); 
 
</script>

は、私はこれらのイベントは、それらを避けるために発生しているモデルのしっかりと十分な理解を取得しようとしていますが、私にもいくつかの防御的なコーディングのアプローチで大丈夫ですよ。

おかげで、 ライアン

Answer 1

ネヴァーマインドは、私が過労馬鹿です。上記のコードは、クリックイベントを制限するためにうまく機能します。私は最近、myPages関数を変更して、より細かくしました。ページ分割リンクのすぐ外側の要素を使用して、各関数にリンクする要素と結果をレンダリングするdivを正確に指定しました。私は単純にgulpコマンドを実行していませんでした。私はそれらの変更を行ったので、それがプッシュアップされていないからです。うまくいけば、誰かがこれが役に立つと思うでしょう。