Question

我有一个包含2个列表框的页面，主要功能将选项从一个转移到另一个。

$(function() {
                $("#moveright").click(function(){
   $("#p_scnt > option:selected").each(function(){
    $(this).remove().appendTo("#copy");
   });
});

页面的其他部分可以选择添加一组列表框

        var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><select size="10" id="p_scnt'+ i +'" name="p_scnt'+ i +'" style="width: 100px;"><option value="volvo">Volvo</option><option value="colvo">Colvo</option><option value="folvo">Folvo</option><option value="bolvo">Bolvo</option></select><input id="moveleft'+ i +'" type="button" value=" < "/><input id="moveright'+ i +'" type="button" value=" > " /> <select size="10" id="copy'+ i +' multiple="multiple" name="copy'+ i +'" style="width: 100px;"></select></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remScnt').on('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });

});

我想解决的问题是为每个创建的其他列表框运行第一个函数。目前它只适用于第一个，而不是重复。

演示：https://jsfiddle.net/neilcosby123/40k0xhud/1/

Answer 1

问题在于事件是如何绑定的。当您说$('#moveright')时，您会在该特定时间点找到包含id = moveright 的元素。

因此，当您编写$("#moveright2").click(/*...*/)时，由于该页面上尚不存在该元素，因此它不会附加任何事件。

一种解决方案是使用event delegation并传递您希望触发事件的选择器：

// Whenever the document is clicked...
// If an element was clicked on whose id starts with "moveright"
$(document).on("click", "[id^='moveright']", function() {

    // Retrieve the container element for this set
    var $container = $(this).closest("label")

    // Find the selected options from the select list whose id starts with "p_scnt"
    // and append them to the select list whose id starts with "copy"
    $container.find("[id^='p_scnt'] > option:selected") 
              .appendTo($container.find("[id^='copy']"));
});

值得指出的是，.remove()在这种情况下是不必要的，因为.append()会移动元素。

请参阅更新的小提琴：https://jsfiddle.net/40k0xhud/2/

点击功能问题

1 个答案: