0

まず、私はこのコードを持っています

<ul id="unselected_list">
   <li class="clearfix" id="p1">
        <img src="img/pic1.jpg" alt="pic1">
        <p>name1</p>
    </li>
     <li class="clearfix" id="p2">
        <img src="img/pic2.jpg" alt="pic2">
        <p>name2</p>
    </li>
</ul>

<ul id="selected_list"></ul>

jquery の appendTo() メソッドを使用して、このコードで<li>タグを内部に挿入します。<ul id="selected_list"></ul>出来た。

$('#unselected_list li').click(function(){
    $(this).appendTo('#selected_list');
});
   <ul id="unselected_list">
         <li class="clearfix" id="p2">
            <img src="img/pic2.jpg" alt="pic2">
            <p>name2</p>
        </li>
    </ul>

   <ul id="selected_list">
       <li class="clearfix" id="p1">
            <img src="img/pic1.jpg" alt="pic1">
            <p>name1</p>
        </li>
    </ul>

しかし、クリック<li id="p1">して戻りたいとき<ul id="unselected_list">は、このコードを使用しました。うまくいきませんでした。

$('#selected_list li').click(function(){
        $(this).appendTo('#unselected_list');
    });

デモ画像http://tapchidesign.hostoi.com/help.jpg

どうやってやるの？

4

3 に答える 3

1

ハンドラー#selected_listに子孫li要素がない場合は、要素またはドキュメント オブジェクトの静的な親の 1 つからイベントをデリゲートする必要があります。

$('#selected_list').on('click', 'li', function(){
    $(this).appendTo('#unselected_list');
});
于 2012-12-08T07:44:45.613 に答える
0

私はこれがあなたを助けると思います-

$('#selected_list li[id^="p"]').click(function(){
    $(this).appendTo('#unselected_list');
});
于 2012-12-08T07:46:55.230 に答える
0

$('#selected_list li')呼び出し時にそのセレクターに一致するすべての要素を返します。クリック イベントは、セレクターを呼び出した後に作成された要素にバインドされません。

動的に生成された要素が考慮されるように、クリック イベントをバインドします。

$('#selected_list').on('click', 'li', function() {
    $(this).appendTo('#unselected_list');
});
于 2012-12-08T07:45:15.897 に答える