0

私は次のjqueryスクリプトを持っています：

$(function(){   
$('#top-menu').on('click', 'a.change-menu', function(e){   
e.preventDefault()   
$("#menu-change-div").load($(this).attr("href"));   

});  
}); 

$(function(){   
$('#menu-change-div').on('click', 'a.change-content', function(e){     
e.preventDefault()   
$("#content").load($(this).attr("href"));     
});  
});

本文内のHTMLは次のとおりです。

<div id="menu-div">
<div id="top-menu">
<h3 id="top-tabs"><a href="contentColumn.html" class="change-menu">Contents</a></h3>
<h3 id="top-tabs"><a href="indexColumn.html" class="change-menu">Index</a></h3>
<h3 id="top-tabs"><a href="searchColumn.html" class="change-menu">Search</a></h3>
</div>
<div id="menu-change-div">
<ul>
//Lots of nested list items and ul's with #change-content id
</ul>
</div>
</div>

<div id="content">
<div id = "page-content">
//content section
</div>
</div>

最初の関数は、メニューdivのリスト項目をクリックして、htmlファイルをコンテンツdivにロードしたときに発生します。

2つ目は、別のタブが選択されたときにメニューdivの内容を変更します。

リストアイテムをクリックすると、すべてが期待どおりに機能し、タブをクリックすると正しく機能します。最初にリストアイテムをクリックし、次にタブをクリックしてから別のリストアイテムをクリックすると、問題が発生します。最初のクリックのようにhtmlをdivにロードするのではなく、hrefをたどって、別のウィンドウで開きます。私が間違っていることについて何か考えはありますか？

4

3 に答える 3

3

試す：

$(function() {
    $('body').on('click', 'a.change-content', function(e) {
        e.preventDefault()
        $("#content").load($(this).attr("href"));
        return false;
    });
    $('body').on('click', 'a.change-menu', function(e) {
        e.preventDefault()
        $("#menu-change-div").load($(this).attr("href"));
    });
});​

要素が動的に追加される場合は、.on（）の使用方法を変更する必要があります。

ドキュメントによると：

イベントハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが.on（）を呼び出すときにページに存在している必要があります。要素が存在し、選択できることを確認するには、ページのHTMLマークアップにある要素のドキュメントレディハンドラー内でイベントバインディングを実行します。新しいHTMLがページに挿入されている場合は、要素を選択し、新しいHTMLがページに配置された後にイベントハンドラーをアタッチします。または、次に説明するように、委任されたイベントを使用してイベントハンドラーをアタッチします。

また、2つを1つに組み合わせることができることにも注意してください$(function () {...})。

于 2012-06-11T21:00:37.857 に答える
1

2つ目は、別のタブが選択されたときにメニューdivの内容を変更します。

click次に、DOMにとどまる予定の祖先要素に2番目のイベントハンドラーを委任する必要がある可能性があります。onこれを行うには、セレクターをメソッドに渡します。

$("#someAncestor").on("click", "a.change-menu", function(e) {
    //Do stuff
});

これは、によって参照される要素を変更するa.change-menuと、イベントハンドラーがバインドされていた要素が存在しなくなるためです（新しい要素は、イベントハンドラーを自動的にバインドしません）。

イベントハンドラーをDOMツリーの上位に委任することで、ほとんどのDOMイベントがツリーをバブルアップするという事実を利用し、祖先要素でそのイベントをリッスンします。イベントターゲットがに渡されたセレクターと一致する場合、onイベントハンドラーが実行されます。

于 2012-06-11T20:59:05.300 に答える
0

.on（）メソッドは、すでに存在するDOM要素をリッスンしています。新しい要素をいくつか追加すると、それらはリッスンされません。後で追加された場合でも（たとえば.load（）を使用して）これらの要素をリッスンする必要がある場合は、.live（）メソッドを使用します。

于 2012-06-11T20:59:31.900 に答える