jquery - 点击功能有问题

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

问题在于事件的绑定(bind)方式。当您说 $('#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() 会移动元素。

查看更新的 fiddle :https://jsfiddle.net/40k0xhud/2/