how to set button id dynamically and bind click event on it?

Question

using this code to generate buttons dynamically and assigning id on it:

    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');
}
}

using this code to get id of every button on its click event:

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

something syntax mistake on this line that's why its not working else when i try static assigning id its working fine

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

Problem with

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

changed it to

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>'

and Live() is deprecated use on() function for button click .

Answer 2

I think delegates would work better in your example rather than live() .

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

as a side note: it is against HTML specifications to have more than one element bearing the same ID , so I would suggest that you replace it with a class instead

Answer 3

As you said the code works fine with static values I am assuming the problem is near id. Try putting " near id.

id="button'+i+'"

full code

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>';