如何从动态生成的html中捕获属性id?

时间:2014-01-05 09:31:02

标签: javascript html jquery

我很确定这不是那么复杂,但我已经花了好几个小时试图弄清楚如何捕获这个动态生成的锚标签的id。

我在我的代码中做的是每次文本输入改变时,ajax请求转到php文件并返回一个带有价格的json数组然后我在按钮中呈现搜索结果,可点击到做其他类型的请求,但到目前为止,我被困住了。

heres是遍历数组并呈现此按钮的代码(注意:按钮的Id也是由函数呈现的变量。

$.ajax({
       type: "POST",
       url: "php/get_products.php",
       data: {query:prod_qry},
       success: function(data){
       $('#loader_s').hide();
       var jsarray = JSON.parse(data);
       var length = jsarray.length;
           for(i=0;i<jsarray.length;i++){
                        var index1 = i;
                        var index2 = Number(i++) + 1;
                                var index3 = Number(i++) + 2;
                                $('#modal-bod').append('<a onclick="renderProds();" class="btn btn-default-item prod_sel" style="margin-top:10px;" id="'+index3+'" data-dismiss="modal">'+jsarray[index1]+' <span class="pull-right" st>lps. '+jsarray[index2]+'</span></a>');
                            }
                        }    

然后这是函数renderProds()

function renderProds(){
                var id = $(this).attr('id');
                alert(id);
           }

警报只是为了测试而尝试捕获值,但实际上还有另一个Ajax请求。

我唯一得到的是var Id未定义......

3 个答案:

答案 0 :(得分:2)

您可以传递像

这样的对象
function renderProds(obj) {
    var id = obj.id;
    alert(id);
}

传递调用者对象,如

 onclick="renderProds(this);"

答案 1 :(得分:0)

我愿意:

onclick="renderProds(this);"

function renderProds(that){
    var id = that.id;
    alert(id);
}

答案 2 :(得分:0)

你使用jQuery ..所以 USE jQuery!

Ajax只需使用dataType:“json”即可为您执行JSON.parse。 内联onclick是不好的做法。 移动成功函数以使代码更具可读性。

$.ajax({
   type: "POST",
   url: "php/get_products.php",
   data: {query:prod_qry},
   dataType : 'json',
   success: productsUpdate
});

function renderProds(event){
    var id = $(event.target).attr("id");
    alert("Id is:"+id);
}

function productUpdate(data){
    $('#loader_s').hide();
    for(i=0;i<data.length;i++){
        var link = $('<a>....</a>');
        link.click(renderProds);
        $('#modal-bod').append(link);
    }
}    

现在,这是可读的。 使用你的代码完成链接创建,没有onclick,删除内联css并使用真正的css选择器,最后,检查这个丑陋的数字(i ++)+ ....它看起来很糟糕。