Question

所以我必须使用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')
    });
};

到目前为止一切正常。

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

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/

Answer 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')
});

演示：Fiddle

停止函数在移动到另一个元素后影响元素

1 个答案: