0

$.ajax...を介して生成される単純な順序なしリストがあります。

<ul id="simpleList"></ul>

ajax 応答の後、次のようになります。

<ul id="simpleList">
    <li id="aaa">list item aaa</li>
    <li id="bbb">list item bbb</li>
    <li id="ccc">list item ccc</li>
</ul>

クリックしたリスト アイテムをこのリストから別のリストに移動する必要があります ( #selectedList)。

通常、私は.click関数を使用してこれを処理しますが、最初のリスト項目は ajax 呼び出しを介してオンザフライで作成されるため、使用を開始しましたが.live、まだ機能させることができません。ここに私がこれまでにいる場所の例を示します。

$('#simpleList > li').live('click', function() {
    console.log('click registered');
    var contents = $(this).html();
    var listId = $(this).attr('id');
    $(this).remove();
    $('#selectedList').show();
    $('#selectedList').append('<li id="' + listId + '">' + contents + '</li>');
});

私は次のような最終結果を期待しています: (#aaaリスト項目がクリックされたと仮定)

<ul id="simpleList">
    <li id="bbb">list item bbb</li>
    <li id="ccc">list item ccc</li>
</ul>
<ul id="selectedList">
    <li id="aaa">list item aaa</li>
</ul>

しかし、代わりに何も起こりません (コンソール ログでさえも)。私は何が欠けていますか？

4

5 に答える 5

3

.live()推奨されていないため.on()、優先されます

$('#simpleList').on('click', 'li', function() {
    console.log('click registered');
    var contents = $(this).html();
    var listId = $(this).attr('id');
    $(this).remove();
    $('#selectedList').show();
    $('#selectedList').append('<li id="' + listId + '">' + contents + '</li>');
});
于 2013-01-16T23:11:08.753 に答える
1

を使用して、それらを他のリストに直接移動できます.append()。

$('#simpleList').on('click', 'li', function() {
    $('#selectedList').append(this);
});

他のみんなが言ったよう.on()に、委任されたイベントの使用。.on()現在の要素だけでなく、将来にも機能します。

ここでそれを見てください！

于 2013-01-16T23:14:00.400 に答える
1

#simpleListイベントをバインドして消えないときにページにある場合は、次のことができます

$('#simpleList').on('click', 'li', myFunction);

そうでない場合は、 である親要素を選択するか、 に接続する必要があります$(document)。

于 2013-01-16T23:11:26.927 に答える
0

onライブの代わりに使用する必要があります。を使用して、ノードをある親から別の親に簡単に移動することもできますappend()。したがって、次のようになります。

$('#simpleList').on('click','li', function() {
    console.log('click registered');
    $('#selectedList').append(this).show();
});
于 2013-01-16T23:11:36.710 に答える
0

onの代わりに使用しliveます。これが理由です。

また、ajax 呼び出しが成功した後、次のようにコードを呼び出す必要があります。

$.ajax({
    url: 'someUrl',                
    success: function (html) {
       $('#simpleList > li').on('click', function() {
        console.log('click registered');
        var contents = $(this).html();
        var listId = $(this).attr('id');
        $(this).remove();
        $('#selectedList').show();
        $('#selectedList').append('<li id="' + listId + '">' + contents + '</li>');
    });
    }
});

更新:少ないコードで移動できます ( appendTo - 未テストを参照)

$('#simpleList > li').on('click', function() {    
            $(this).appendTo('#selectedList)
}
于 2013-01-16T23:11:43.593 に答える