Question

I have a page with a button , and when a user click that button , new `select tags` will be appear

That new select has the class ‘selector’, and there is a jQuery call on that call , but doesn’t fire

html code

<ul id="ul">
    <li>
        <select class='selector'></select>
        <input type='button' value='new select' id='newSelect'/>
    </li>
</ul>​

jQuery code

$(document).ready(function (){
    var options = "<option>Select Name</option>";
    options +="<option>Roma</option>";
    options +="<option>Milano</option>";
    $('#ul .selector').html(options);
});
$(document).ready(function(){
    $('#ul').on('click','#newSelect',function(){
        $('#ul').append("<li><select class='.selector'></select></li>");
    });
});

​check the code here please

Answer 1

Filling the selector, indeed, only triggers at document load, and the dot should be removed from the new select-class, and the selector should be filled onclick.
So the new code should be:

$(document).ready(function (){
    var options = "<option>Select Name</option>";
    options +="<option>Roma</option>";
    options +="<option>Milano</option>";
    $('#ul .selector').html(options);

    $('#ul').on('click','#newSelect',function(){
        $('#ul').append("<li><select class='selector'></select></li>");
        $('#ul .selector').html(options);
    });
});