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

how to bind click event in jquery for dynamically added html element
click event for dynamically created button jquery
how to add onclick event in javascript dynamically for button
javascript add onclick event dynamically
jquery append button with onclick
event binding on dynamically created elements javascript
create button dynamically jquery
jquery create button with click event

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

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.

jquery, Here myUL– is the id which is already there on dom when the page loads. Jquery : Now by using .on() will able to bind the click event on� jQuery Dynamic Click Event: Bind click event on dynamically added element HTML tags. Here this article explains how to add click event for dynamic added element. In jQuery for click event we can simply use .click() method which works fine, but when you add dynamic HTML and try to achieve click event for it, then there you face problem .i.e .click() is not working.

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

How to Add Click Event for Dynamic Button Element in Jquery , jQuery .click is one of the most simple and widely used events in the jQuery library. div></p> <p><button id="btn1">Button 1</button></p> <script Then we'll put a .click function to handle the event. The .on() event is related to the . click() event but by not directly binding the event and moving to delegates we can tell� Binding Click Event to a Dynamically Created Element using jQuery. In jQuery, you can use the .click () method to trigger a click event. This method works with almost every element. The .click () method also work on elements that you will create dynamically using a script.

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

Fix: jQuery .click() Event Not Working with Dynamically Added , In the script, attach click event on #lists li selector to change the <input type=' button' value='Add' id='but_add'> <ul id='lists'> <li>List item 1</li> event to every new item I bind an event to parent selector and set the target� Answer: Use the jQuery on () method. If you try to do something with the elements that are dynamically added to DOM using the jQuery click () method it will not work, because it bind the click event only to the elements that exist at the time of binding. To bind the click event to all existing and future elements, use the jQuery on () method.

Attach Event to Dynamically Created Elements with jQuery, How to Bind Click Event to Dynamically Created Elements in jQuery, Dynamic My requirement is to create number of buttons equal to the json array count. Handling the Mouse Click Event. A click event on a disabled form field does not fire events in Firefox and Safari. Manage Events with Background Scripts. A Button control is used to process the button click event. when user enters mailid in textbox and click on button then file download. C++ Window with Button Click Event IDEA Developers.

On click not working for dynamically added link id attribute, The .click() method also work on elements that you will create dynamically id=' + i + '>' + i + '</span>'; divMain.append(divCount); } // Attach a click event to� The problem with dynamically created elements, is that they aren’t born with the same event handlers as the existing elements. Let’s say we have a list of items that you could click on to toggle/add a class name, when a new element is created and appended to that same list - it won’t work - the event handler attachment is missing.

Binding Click Event to a Dynamically Created Element using jQuery, This article explains how to get a Click Event for static and dynamic controls I will first create a static button in HTML and will find it's click event, for you also don't need to worry because we will work on the id of the control. If you want to add an element dynamically, use DOM in jQuery click () method (It will not work, because it binds the click event only to the elements that exist at the time of binding) To bind the click event to all the existing and future elements, use the jQuery on () method.

Comments
  • done changes but still $('button').live('click', function(){ var btnId = $(this).attr('id'); alert(btnId); });
  • the above mentioned function in comment is not firing and i m not getting id of clicked button
  • pls take a look in this post also :stackoverflow.com/questions/16458943/…
  • its not firing click event
  • @user1668447 I dont have expertise in sqlite