Question

i have html page with a link

when user clicked that link a new select tag should be appeared

html code

<div class="container" id="addCell">
    <ul class="containerUL">
        <li class="containerLI">
            <p>
                <label>Name</label>
                <input type="text" class="longInput1"/>
            <p>
            <p>
                <label>City</label>
                <select id="countrySelector">
                </select>
            </p>
        </li>
        <li class="containerLI">
            <p>
                <label>Inserted cells</label>
                <a href="#" class="smallLink" id="acaclink">new</a>
            </p>
        </li>
        <li class="containerLI">
            <input type="submit" class="button1" value="save"/>
        </li>
    </ul>
</div>

jquery code

$("#addCell").ready(function(){
    $("#addCell").on('click',"#acaclink",function(){
        $.getJSON("http://localhost/Mar7ba/Cell/getAllCells/TRUE",function(data){
            var options = '';
            options+="<option>select cell</option>";
            for(var i=0;i<data.length;i++){
                options += "<option>"+data[i]+"</option>";
            }
            $(this).closest('li').append('<p>\n\
            <label>Select Cell</label>\n\
            <select name="acSelect[]">\n\
             '+options+'\n\
</select>\n\
            </p>');
        });
    });
});

1- i am check the JSON call and there is no error
2- i am alert option and it works as i want

my question is : when i replace $(this).closes('li') with $('ul').append
it works , but when i put closest li it doesn’t . where is the mistake please

Answer 1

That’s because $(this) inside anonymous function has another scope and refers to another object

$("#addCell").ready(function(){
    $("#addCell").on('click',"#acaclink",function(){
        var me = this; // we use "me" as a closure to the object we clicked at

        $.getJSON("http://localhost/Mar7ba/Cell/getAllCells/TRUE",function(data){
            var options = '';
            options+="<option>select cell</option>";
            for(var i=0;i<data.length;i++){
                options += "<option>"+data[i]+"</option>";
            }
            $(me).closest('li').append('<p>\n\   // <---- here we use "me"
            <label>Select Cell</label>\n\
            <select name="acSelect[]">\n\
             '+options+'\n\
</select>\n\
            </p>');
        });
    });
});