1

ajax を介して読み込まれるすべての jQuery UI タブで Javascript が無効になっているようです。jQuery ツールチップと .click() アラートでこれをテストしています。Javascript は、ajax (ページに存在する ID) によって読み込まれないタブで正常に動作します。

タブを呼び出す方法は次のとおりです。

$(function() {
$('#foo-tabs').tabs(
{
heightStyle: 'content',
// Callback run when selecting a tab
beforeLoad: function(event, ui) {

// If the panel is already populated do nothing
if (ui.panel.children().size() > 0)
    return false;

//load specific ID within target page
ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'));

// stop the default process (default ajax call should not be launched)
return false;
}
}
);
});

アクティブ化しようとしているJavaScriptは次のとおりです。

$(function() {
$( '.activate-tooltip' ).tooltip();
});

そしてテスト:

$(function() {
$("h1").click(function() {
alert("zomg javascript works!");
});
});

ajax をロードしたすべてのタブで JavaScript を動作させる方法についてのアイデアはありますか? お時間を割いていただきありがとうございます。

4

3 に答える 3

2

問題は、イベントをバインドするときに、これらの要素が DOM に存在しないことです。これに対処する方法は、DOM に存在するより高いレベルの DOM 要素 (必要に応じてドキュメントまで) にイベントを委譲することです。

たとえば、.onを使用して委任するには

$(document).on('click', 'h1', function() {
      alert("zomg javascript works!");
 });

ツールチッププラグインの場合、次のようなことができます

   $(function() {
        //initialize tooltip plugin
        //dvCont is just an existing element in the DOM, you can use #foo-tabs
        $('#dvCont').tooltip({
            items: '.activate-tooltip',
            content: function(){
                var element = $( this );
               if ( element.is( ".activate-tooltip" ) ) {
                return 'Some text';
                }
                if ( element.is( "[title]" ) ) {
                  return element.attr( "title" );
               }

             }
          });

      $('#dvCont').append($('<div class="activate-tooltip" >Test</div>')); //dynamic content

    });

ここにjsBinへのリンクがあります

プラグインのデモページで、より完全な例を見ることができます。

編集:

プラグインを DOM に追加した直後にプラグインを初期化できるのに、イベント委任を使用する必要がある理由については、動的コンテンツを処理する以外に、イベント委任を使用するもう 1 つの理由がパフォーマンスによるものであることを指摘する価値があると思います。つまり、イベント委任を使用すると、アタッチできるイベント ハンドラーが少なくなり、メモリの使用量が少なくなります。

これを説明するために、イベント委譲と直接バインディングの使用を比較するjsPerfへのリンクを示します。

于 2012-12-18T14:39:21.490 に答える
1

などのメソッドを呼び出すと、jQueryオブジェクト内のすべての要素(つまり、実行時に.click()セレクターと一致した要素)にイベントハンドラーが直接追加されます。ページに新しい要素を追加すると、そのコードが実行されたときに存在していなかったため、関連するイベントハンドラーはありません。

解決策はイベントの委任です。一般的な原則は、DOMツリーの上位にある要素(一致させたいすべての要素を含む要素)にイベントハンドラーを設定することです。次に、そのタイプのイベントがその中の要素でトリガーされ、ハンドラーで要素にバブルアップすると、トリガー要素が条件を満たしているかどうかを確認します。含まれている場合は、コールバック関数を実行します。

ただし、これはイベントハンドラーでのみ機能し、プラグインでは機能しません。プラグインの初期化を委任する方法がわからないため、コードを再度実行する必要があります。ありがたいことに、この.load()関数は、新しいタブのコンテンツがAJAX経由でロードされたときに実行されるコールバック関数を取ります。

ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'), function() {
    $('.activate-tooltip', ui.panel).tooltip();
});
于 2012-12-18T14:46:08.017 に答える
0

jqueryの機能を使用onして、動的に作成されたhtmlのクリックイベントをトリガーできます(あなたの場合、動的html(タブ)を作成するajax関数です)。`

$("h1").on("click", function(){ alert("zomg javascript works!"); });

`

于 2012-12-18T14:42:00.873 に答える