0

所以我必须 html 列表 - 一个可供选择，另一个要添加。

<ul id="selet_from">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<ul id="add_to">

</ul>

当我单击“选择”列表中的项目时，我需要添加一些文本并将其移动到“添加到”列表中。

function add_to_selected(){
    $('#selet_from li:not(#add_to li)').click(function(){
        //need to add text in child element for easy removal - works
        $(this).html('<span>adittional text - </span>'+$(this).html());

        // move element to 'selected' list
        $(this).appendTo('#add_to');

        // initialize remove from list on newly added items
        remove_from_selected();

        console.log('add')
    });
};

到目前为止一切正常。

如果我不小心将错误的项目添加到“添加到”列表中，那么我应该能够通过单击它来反转操作。意思是，单击“添加到”列表中的项目应删除先前添加的文本并将项目移回“从”列表中选择

function remove_from_selected(){
    $('#add_to li').click(function(){
        // need to remove <span child>
        // example below doesn't work :(
        $(this).remove('span');

        // need to take element back to #selet_from
        $(this).appendTo('#selet_from');

        console.log('remove')
    });
};

add_to_selected();

问题是add_to_selected()在元素被移动到“添加到”列表后不应该执行函数，反之亦然。http://jsfiddle.net/DpBbZ/1/

4

1 回答 1

1

由于您正在寻找选择器的动态评估，请使用委托事件处理

$('#selet_from').on('click', 'li', function () {
    //need to add text in child element for easy removal - works
    $(this).html('<span>adittional text - </span>' + $(this).html());

    // move element to 'selected' list
    $(this).appendTo('#add_to');
});


$('#add_to').on('click', 'li', function () {
    // need to remove <span child>
    // example below doesn't work :(
    $(this).children().remove();

    // need to take element back to #selet_from
    $(this).appendTo('#selet_from');

    console.log('remove')
});

演示：小提琴

于 2013-11-11T09:58:30.953 回答