如何給id名稱 <input> 和選擇器值動態

Question

我目前正在遍歷一個列表，並將信息附加如下。 我想使用該列表中的“ ID”信息，並在每次按“付費”按鈕時將該信息發送到url。 目前，當我將選擇器硬編碼為“＃input1”並將id值編碼為identity [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動態，那么那時候您必須將click函數綁定到該按鈕，請嘗試：

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