0

クリックすると個々の .php ページをロードする一連の jQuery UI AJAX タブがあります。タブ ウィジェットを保持するページは既にリンクされている CSS とスクリプトを提供するため、私のスタイリングなどはすべて伝えられます。ただし、タブをクリックしたときに読み込まれる実際のページに関しては、これらの新しく作成された DOM 要素で preventDefault() を .on() と連携させることはできません。

タブで jQuery BBQ を使用しているため、URL に「#」を追加できません。これは、タブ パネル内のリンクがクリックされたときに発生します。最初にロードされた DOM 要素で preventDefault() を正常に使用できましたが、AJAX を介してタブ ウィジェットにフェッチされている要素は使用できませんでした。

コンテンツ トグルに対する私の機能は...

$(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("click", function(work)) などを使用していくつかの方法を試しました。別の関数で .on() を使用し、上記の最初の関数でそれを結合しようとしました。私が間違っていることを誰かが知っていますか？このコードは、AJAX 経由で読み込まれたコンテンツではなく、静的なタブ コンテンツで機能します。どんな助けでも大歓迎です。これを理解できないようです。前もって感謝します。

4

2 に答える 2

1

この部分$(".showMoreOrLess").clickは、ページ上のすでにアクセス可能なリンクにのみ適用されます

イベントの委任を使用してみてください（ここでは、既存の要素ごとにクリックがキャプチャされ、監視しているセレクターを渡すだけです...リスナーを保存する優れた副作用として

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

ドキュメントではなく、ページの特定のIDを使用します$("#myContainerId")（編集：もちろん、クリックしている要素は、IDを持つ要素の内部にある必要があります）

于 2012-04-23T19:22:25.587 に答える
0 
$("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);
  }
});
于 2012-04-23T19:30:03.503 に答える