0

次のマークアップがあるとします。

<div id="nodes">
    <ul>
        <li><a href="#">Colors</a>
            <ul>
                <li><a href="#">Red</a></li>
                <li><a href="#">Green</a></li>
                <li><a href="#">Blue</a></li>
            </ul>
        </li>
        <li><a href="#">Sizes</a></li>
        <li><a href="#">Material</a></li>
    </ul>
</div>

兄弟ノードを追加する jQuery 関数を作成しました。

$("#nodes ul li").click(function(e) {
    addSibling(this, 'new one');
    e.stopPropagation();
});

function addSibling(selector, content){
    var markup='<li><a href="#">' + content + '</a></li>';
    $(selector).parent().append(markup);
}

元のノードをクリックする限り、最初はうまくいくようです。たとえば、「青」をクリックすると、次のようになります。

<div id="nodes">
    <ul>
        <li><a href="#">Colors</a>
            <ul>
                <li><a href="#">Red</a></li>
                <li><a href="#">Green</a></li>
                <li><a href="#">Blue</a></li>
                <li><a href="#">new node</a></li>
            </ul>
        </li>
        <li><a href="#">Sizes</a></li>
        <li><a href="#">Material</a></li>
    </ul>
</div>

ただし、新しいノードをクリックすると、新しいノードを兄弟として配置する代わりに、1 レベル上になります (つまり、「色」、「サイズ」、および「材料」の兄弟)。jQuery によって生成されたマークアップを見ると、違いがわかりません。そのため、新しいノードが元のノードと異なる動作をする理由がわかりません。ありがとう。

4

4 に答える 4

2

私はお勧めします：

$("#nodes ul").click(function (e) {
    addSibling(e.target, 'new one');
    e.stopPropagation();
});

function addSibling(selector, content) {
    var markup = '<li><a href="#">' + content + '</a></li>';
    $(selector).parent().append(markup);
}

JS フィドルのデモ。

これにより、クリック ハンドラが要素にバインドされul、代わりに、内でクリックされた要素である がthis使用されます。これは、クリック イベント ハンドラーを新しく追加された要素にバインドしていないという問題を回避することを意味します。e.targetul

于 2013-04-20T21:26:12.693 に答える
0

問題は、新しく作成された<li>s にイベント ハンドラーがアタッチされていないことです。これ$("#nodes ul li").click(...)は、セレクターに適合する要素のみを呼び出すと、それらにアタッチされたハンドラーが取得されるためです。その関数が呼び出されると、新しい要素が DOM に追加されても再度呼び出されることはありません。その結果、新しい s をクリックすると、既にイベント ハンドラーがある<li>にヒットするまで「泡立ち」ます。<li>

この問題は、要素に直接ではなく、デリゲート クリック ハンドラーを使用することで解決できます。

$("#nodes").on("click","li",function(e) {
    addSibling(this, 'new one');
    e.stopPropagation();
});

これが機能する方法は次のとおりです。要素
にクリック ハンドラを 1 つだけアタッチします。要素内の#nodesいずれかをクリックすると、関数がトリガーされます。また、要素内のすべての sに適用されるため、それらが動的に作成されても問題ありません。<li>nodes<li>#nodes

于 2013-04-20T21:25:22.247 に答える
0

その理由は、jquery がクリック コールバックを既存のオブジェクトに登録するためです。新しく作成されたliをクリックすると、バブルアップして1レベル高くなります。

それに加えて、class="nodes" があり、id="nodes" が必要でした。

それを修正する方法は？クリックを ul (li ではなく) に登録し、addSibling で親を削除してみてください。

于 2013-04-20T21:19:17.320 に答える
0

新しいノードを DOM に追加するとき、それにクリック イベントをアタッチしないため、基になる 'li' がクリックを登録し、それにノードをアタッチします。これを解決するには、addSibling 関数で、新しいノードを作成した後、クリック イベントをアタッチします。

于 2013-04-20T21:22:59.750 に答える