如何动态地为 <input> 和选择器值指定 id 名称

How to give id names to <input> and selector values dynamically

本文关键字：选择器 名称 id input 何动态 动态      更新时间：2023-09-26

我目前正在循环浏览列表并附加该信息，如下所示。我想使用该列表中的"ID"信息，并在每次按下"付费"按钮时将该信息发送到 URL。当我将选择器硬编码为"#input1"并将 id 值硬编码为 identity[0] 时，这目前有效。

如果我有第二组带有新 id 的信息和一个新按钮，这将不起作用，因为它在追加期间，第二个按钮也将是 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");
            })
        });

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

将类添加到输入以将其选中

向

同一输入添加数据属性，以标识所需的 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]

希望有帮助。

当您附加带有 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" );
    })
相关文章：