Issue with click function

Question

I have a page with 2 listboxes, the main function transfers options from one to the other.

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

The other part of the page has the option to add an additional set of listboxes

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

});

The issue I am trying to solve is running the first function for each additional set of listboxes that is created. At the moment it only works on the first one and not the duplicates.

Demo: https://jsfiddle.net/neilcosby123/40k0xhud/1/

Stryner · Accepted Answer · 2015-08-13 19:37:30Z

3

The issue is because of how events are bound. When you say $('#moveright'), you are finding the element with id = moveright at that specific point in time.

So when you write $("#moveright2").click(/*...*/), since the element does not exist on the page yet, it doesn't attach any event.

One solution is to use event delegation and pass a selector that you want the event to fire on:

// 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']"));
});

It's also worth pointing out that .remove() is unnecessary in this situation since .append() moves elements.

See updated fiddle: https://jsfiddle.net/40k0xhud/2/

edited Aug 13, 2015 at 19:37

answered Aug 13, 2015 at 19:12

Stryner

7,3363 gold badges21 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2168066 Over a year ago

This actually makes perfect sense. Thanks for the advice!

Collectives™ on Stack Overflow

Issue with click function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related