0

我有一个带有链接的 html 页面

当用户单击该链接时，应出现一个新的选择标签

html代码

<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代码

$("#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-我正在检查 JSON 调用，没有错误 2-我是警报选项，它可以按我的意愿工作

我的问题是：当我用它替换$(this).closes('li')时，$('ul').append 它可以工作，但是当我放最接近的 li 时，它就不行了。请问错在哪里

4

2 回答 2

5

那是因为$(this)内部匿名函数有另一个作用域并引用另一个对象

$("#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>');
        });
    });
});
于 2012-05-17T23:54:31.937 回答
1

thisgetJSON在回调中具有不同的含义。

您可以在 外部保留引用getJSON，然后在内部使用它。

$("#addCell").ready(function(){
    $("#addCell").on('click',"#acaclink",function(){

        var that = this; // reference this

        $.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>";
            }

              // use it here
            $(that).closest('li').append('<p>\n\
            <label>Select Cell</label>\n\
            <select name="acSelect[]">\n\
             '+options+'\n\
</select>\n\
            </p>');
        });
    });
});

或使用$.ajax及其context属性。

    $.ajax({
        url:"http://localhost/Mar7ba/Cell/getAllCells/TRUE",
        context:this,
        dataType:'json',
        success: function(data){

          // your code
            $(this).closest('li').append('<p>\n\...'

        }
    });

这等效于您的代码，因为getJSON它只是对此的包装，但是您可以获得所有可用的选项，例如context:.

于 2012-05-17T23:54:54.390 回答