通过动态生成的li onclick将参数发送到函数

时间:2017-10-23 14:42:44

标签: jquery ajax

现在我知道概念od DOM 数据绑定我很清楚我的问题,问题是如何解决它!

我在ajax上的服务器响应动态生成的ul里面有一组li,现在我需要做的就是每一个我需要添加一个接受两个参数的函数,这里是我的ajax代码

success: function(data){


            //console.log(data);
            //var JSONObject = JSON.parse(data);
            //console.log(JSONObject);
            var list = $("#suggesstion-box").append('<ul id="country-list"></ul>').find('ul');

            for (i = 0; i < data.length; i++) {

                 list.append("<li class='clickfunction' onclick=clickfunction("+data[i].lead_id+","+data[i].value+")>"+data[i].value+"</li>");

            }

            $("#suggesstion-box").show();
            $("#suggesstion-box").html(list);
            $(".search-box").css("background","#FFF");

        }

现在我想要做的是我想将 data [i] .lead_id data [i] .value 的值传递给函数现在问题li是动态生成的,所以它们没有被分类到函数中,因为它给了我函数未定义错误现在我可以通过使用jquery live 方法来解决这个问题/ p>

$('.clickfunction').live('click', function(){
         alert("here");
        });

现在这个问题很好,问题就是参数!因为当我们调用javascript的正常函数时我们可以将参数传递给它们但是在这种情况下我们可以以某种方式将参数传递给实时函数吗?或者还有其他更好的方法吗?

2 个答案:

答案 0 :(得分:1)

尝试使用属性:

success: function(data){


            //console.log(data);
            //var JSONObject = JSON.parse(data);
            //console.log(JSONObject);
            var list = $("#suggesstion-box").append('<ul id="country-list"></ul>').find('ul');

            for (i = 0; i < data.length; i++) {

                 list.append("<li class='clickfunction' lead-id='" + data[i].lead_id + "' lead-value='" + data[i].value + "'>"+data[i].value+"</li>");

            }

            $("#suggesstion-box").show();
            $("#suggesstion-box").html(list);
            $(".search-box").css("background","#FFF");

        }


$('.clickfunction').live('click', function(){
         var lead_id = $(this).attr("lead-id");
         var lead_value = $(this).attr("lead-value");
         console.log(lead_id + " - " + lead_value);
        });

答案 1 :(得分:0)

你可以这样做:

for (i = 0; i < data.length; i++) {
    var li = $('<li>'); // create new <li> element
    li.text(data[i].value); // set text, class, whatever you want
    li.on('click', function () { // bind to click event on in
        console.log(data[i]); // do what you want with the data
    });
    list.append(li); // append to the list
}

这样您根本不需要live来电。 Btw live很久以前就被弃用了(v1.7)。您应该使用on代替。

http://api.jquery.com/on/

http://api.jquery.com/live/