jQueryのAJAXタブでpreventDefault（）をon（）で使用

Question

jQuery UIのAJAXタブがあり、クリックすると個々の.phpページを読み込みます。タブウィジェットを保持するページはすでにリンクされているCSSとスクリプトを提供しているので、私のスタイリングなどはすべて伝わります。しかし、タブをクリックしたときに読み込まれる実際のページについては、これらの新しく作成されたDOM要素でpreventDefault（）を.on（）で扱うことはできません。

タブにjQuery BBQを使用しているため、URLに「＃」を追加できません。これは、タブパネル内のリンクがクリックされた場合に発生します。 最初にロードされたDOM要素でpreventDefault（）を正常に使用できましたが、AJAX経由でタブウィジェットにフェッチされているものではありません。コンテンツトグラーため

My機能は

$(function(){ 
$(".showMoreOrLess").on('click', (function() { 
if (this.className.indexOf('clicked') != -1) { 
    $(this).removeClass('clicked'); 
    $(this).prev().slideUp(500); 
    $(this).html("Read More" + "<span class='moreUiIcon'></span>"); 
    } 
    else { 
    $(this).addClass('clicked'); 
    $(this).prev().slideDown(500); 
    $(this).html("See Less" + "<span class='lessUiIcon'></span>"); 
    }  
})); 
}); 

私はそれには、この関数からのpreventDefault（）を組み合わせたいのですが...です。

// prevents default link behavior on BBQ history stated tab panels with "showMoreOrLess" links 
$(".showMoreOrLess").click(function (event) 
{ 
event.preventDefault(); 
//here you can also do all sort of things 
}); 
// /prevents default behavior on "showMoreOrLess" links 

は、私は別の関数に（）.on使用していたなど、（関数（仕事）「クリック」）.on使用して、いくつかの方法を試してみましたが、また、最初にそれを組み合わせることを試みてきました上記の関数。誰かが私が間違っていることを知っていますか？このコードはAJAXを介して読み込まれたコンテンツではなく、静的なタブコンテンツで動作します。どんな助けでも大歓迎です。これを理解できないようです。前もって感謝します。

Answer 1

$("body").on('click', ".showMoreOrLess", function(event) { 
    event.preventDefault(); 
    var self = $(this); 
    if (self.hasClass('clicked')) { 
    self.html("Read More" + "<span class='moreUiIcon'></span>").removeClass('clicked').prev().slideUp(500); 
    }else { 
    self.html("See Less" + "<span class='lessUiIcon'></span>").addClass('clicked').prev().slideDown(500); 
    } 
}); 

Answer 2

一部$(".showMoreOrLess").clickは自分のページ上にすでにアクセス可能なリンクを適用し

はここにクリックが毎回既存の要素の上に捕捉され、あなたはそれがために見ているセレクタを渡す（イベントの委任を使用しようと...素敵な副作用として、あなたは、文書がページ$("#myContainerId")から特定のIDを使用するのではなく、リスナー

$(document).on("click", ".showMoreOrLess", function(event) { 
    event.preventDefault(); 
    //here you can also do all sort of things 
}); 

を保存する（EDIT：もちろん、あなたが必要にクリックされている要素は、idを持つ要素の内側にあるため）