jQuery dynamic added select

问题

When I add a select dynamic to a DIV via clone, I'm not able to select anything from the new dropdown, any ideas why?

$(".inline-form .copyIng:first-child").clone().appendTo(".inline-form");

See this : http://jsfiddle.net/rxwL6/

.trigger("refresh"); Dosen't change anything, I still can't select anything from the new dropdown.

回答1:

Problem is that you are cloning html content that has already been 'enhanced' by jQM and not the original markup. Therefore jQM does not know how to create or refresh it.

Instead, if you know the markup ahead of time, just insert it like this:

$(document).on("pageinit", function () {
    $("#newIng").click(function () {
        var tocopy = $('<div class="copyIng"><div class="left"><input type="text" name="m" placeholder="Some text" /></div> <div class="ingDiv"><select size="1" name="c"><option value="">No 1</option><option value="">No 2</option><option value="">No 3</option></select></div></div>');       
        $(".inline-form").append(tocopy);
        $(".copyIng").trigger("create");
    });
});

here is your updated FIDDLE

UPDATE: From comment. OP is interested in cloning the list of options in the dropdown so they don't have to be retrieved from database each time. Here is an example of getting the option list and inserting just that into the new text beeing appended:

$(document).on("pageinit", function () {
    $("#newIng").click(function () {
        var optList = $(".ingDiv select").eq(0).html();                
        var tocopy = $('<div class="copyIng"><div class="left"><input type="text" name="m" placeholder="Some text" /></div> <div class="ingDiv"><select size="1" name="c">' + optList + '</select></div></div>');      
        $(".inline-form").append(tocopy);
        $(".copyIng").trigger("create");
    });
});

updated FIDDLE

来源：https://stackoverflow.com/questions/20474400/jquery-dynamic-added-select