如何动态设置按钮ID并绑定点击事件？

Question

使用此代码动态生成按钮并在其上分配id：

    function successCBofMissedNamazFromDB(tx, results) {
            if (results != null && results.rows.length > 0 && results.rows != null) {
                var htmlstring = "";
                var temp = 0;
                for (var i = 0; i < results.rows.length; i++) {

                    htmlstring += '<div class="ui-grid-b">';
                    htmlstring += '<div  class="ui-block-a ui-bar-d" style="font-size:x-medium;height:80px;">'
                            + prayerName[i] + '</div>';
                    htmlstring += '<div  class="ui-block-b ui-bar-e" style="font-size:x-medium;height:80px;">'
                            + results.rows.item(i).missing_prayers + '</div>';

                    alert(""+performedNamaz[i]);
        htmlstring += '<div class="ui-block-c ui-bar-e" style="font-size:x-medium;height:80px;"><input type="number" data-inline="true" data-mini="true" value="'+performedNamaz[i]+'"/><a href="#" data-role="button" data-inline="true" data-icon="plus" id=button'+i+' style="float:right;width:30%;">ADD</a>'
        +''+ '</div>';
         htmlstring += '</div>';
    }
$("#chart1").empty().append(htmlstring).trigger('create');
}
}

使用此代码获取其click事件中每个按钮的id：

$('button').live('click', function(){
         var btnId = $(this).attr('id');
         alert(btnId);
      });

这行上的语法错误，这就是为什么当我尝试静态分配id工作正常时它不工作的原因

htmlstring += '<div class="ui-block-c ui-bar-e" style="font-size:x-medium;height:80px;"><input type="number" data-inline="true" data-mini="true" value="'+performedNamaz[i]+'"/><a href="#" data-role="button" data-inline="true" data-icon="plus" id=button'+i+' style="float:right;width:30%;">ADD</a>'
            +''+ '</div>';

Answer 1

问题

value='+performedNamaz[i]+'  and id=button'+i+' 

改成了

htmlstring += '<div class="ui-block-c ui-bar-e" style="font-size:x-medium;height:80px;"><input type="number" data-inline="true" data-mini="true" value="+performedNamaz[i]+"/><a href="#" data-role="button" data-inline="true" data-icon="plus" id=button"+i+" style="float:right;width:30%;">ADD</a>'

不推荐使用Live（）和使用on（）函数进行button click 。

Answer 2

我认为代表在你的例子中会更好，而不是live() 。

$('.ui-block-c').delegate('a#button','click', function(){
    var btnId = $(this).attr('id');
    alert(btnId);
});

作为旁注： 如果有多个元素带有相同的ID，则违反HTML规范，所以我建议您用类替换它

Answer 3

正如你所说，代码与静态值工作正常我假设问题接近id。 试着把“接近id。

id="button'+i+'"

完整代码

htmlstring += '<div class="ui-block-c ui-bar-e" style="font-size:x-medium;height:80px;"><input type="number" data-inline="true" data-mini="true" value="'+performedNamaz[i]+'"/><a href="#" data-role="button" data-inline="true" data-icon="plus" id="button'+i+'" style="float:right;width:30%;">ADD</a>'
            +''+ '</div>';