Question

我目前正在遍历列表并按如下方式附加该信息。我想使用＆＃39; ID＆＃39;来自该列表的信息，并在每次按下“付款”时将该信息发送到网址。按钮。这当我将选择器硬编码为＆＃39; #input1＆＃39;和id值作为标识[0]。

如果我有第二组信息带有一个新的id和一个新的按钮，并且在追加期间与cos一起使用，那么这将不起作用，第二个按钮也将是id input1。

有没有办法在每次循环时为按钮动态提供不同的id名称，将其与列表ID号配对，以及根据按下哪个按钮向选择器提供信息的方法？

或者有更好的方法吗？请指教。谢谢。

var identity = [];
var count = 0;

$.getJSON("http://website.com/public/user/listunpaidbills/",function(data){
        //Loop for each element on the data
        $.each(data,function(elem){
            var wrap = $("<div/>").attr('data-role', 'collapsible');
            count++;
            identity.push(data[elem].id); 
            //Create the h1 and the other elements appending them to bills List
            $("<h1/>",{
                text:data[elem].reference
            }).appendTo(wrap);   
            $("<p/>",{
                text:"Account: "+ data[elem].account
            }).appendTo(wrap);        
            $("<p/>",{
                text:"Amount: "+ data[elem].amount
            }).appendTo(wrap);
            $("<input type='submit' value='Paid' id='input1'/>",{
                text:"Paid"
            }).appendTo(wrap);
            wrap.appendTo('#unpaidList');             
        })//end of for each loop 
        $( "#unpaidList" ).collapsibleset( "refresh" );
    })

        $("#input1").click(function(){
          $.getJSON("http://website.com/public/user/confirmbill/", {
                id: identity[0] 
                }, function(data) {
                    alert(data.status);
                }).fail(function() {
                    alert("error");
            })
        });

Answer 1

如果我理解正确，那么最简单的解决方案就是

在输入中添加一个类以选择它

将数据属性添加到同一输入以标识所需的identity []索引。

$("<input type='submit' value='Paid' id='input1'/>",{
     text:"Paid"

变为

$("<input type='submit' value='Paid' />",{
     class:"myinput", 
     text:"Paid"
   }).appendTo(wrap)
   .data('identityindex',count)

和

    $("#input1").click(function(){
      $.getJSON("http://website.com/public/user/confirmbill/", {
            id: identity[0]

变为

    $(".myinput").click(function(){
      var $this = $(this);
      var index = parseInt($this.data('identityindex')); 

      $.getJSON("http://website.com/public/user/confirmbill/", {
            id: identity[index]

希望有所帮助。

Answer 2

在您附加带有Json响应的按钮时。如果你想让id动态，那么你必须将点击功能绑定到该按钮，试试：

$.getJSON("http://website.com/public/user/listunpaidbills/",function(data){
        //Loop for each element on the data
        $.each(data,function(elem){
            //your code 
            var dynamicId = "input2";//local variable of dynamic button

            $("<input type='submit' value='Paid' id='"+dynamicId+"'/>",{
                text:"Paid"
            }).appendTo(wrap);
            wrap.appendTo('#unpaidList');

//binding click event to created button

$("#input1").bind('click',function(){
          $.getJSON("http://website.com/public/user/confirmbill/", {
                id: identity[0] 
                }, function(data) {
                    alert(data.status);
                }).fail(function() {
                    alert("error");
            })
        });



        })//end of for each loop 
        $( "#unpaidList" ).collapsibleset( "refresh" );
    })

如何动态地为<input />和选择器值赋予id名称

2 个答案: