Click event assignment for dynamically added buttons

Question

I create several buttons dynamically and assigning their identifiers.

When someone clicks on this button, I want to get the identifier and from there do some task.

My job is done here

$(document).ready(function() {
    $('input:button').addClass("btnClass");
    fillData();
    $('#btnGet').click(function() {
        fillData();
    });
    function fillData() {
        $.ajax({
            type: "Post",
            url: "../Linq/myService.asmx/getStudent",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                //var nMsg = (typeof msg.d) == 'string' ? eval('(' + msg.d + ')') : msg.d;
                var t = "<table width='80%' id='resTab'> <tr>" +
                      "<td colspan='5' style='text-align:center'><font size='3'><strong>Your Search Result......</strong></font></td></tr> <tr><td style='text-align:left' colspan='5'><hr></td></tr> "
                      + " <tr><td style='text-align:center'>Student ID</td><td style='text-align:center'>Student Name</td><td style='text-align:center'>Student Course</td><td style='text-align:center'>Student USN</td></tr>"
                      + " <tr><td style='text-align:left' colspan='5'><hr><br></td></tr> ";
                $.each(msg.d, function(index, item) {
                    t = t + " <tr><td style='text-align:center'>" + item.studId + "</td><td style='text-align:center'>" + item.studName + "</td><td style='text-align:center'>" + item.studCourse + "</td><td style='text-align:center'>" + item.studUsn + "</td><td><input type='button' ID='btn" + item.studId + "' value='Delete' onClick='onButtonClick()'/></td></tr>";
                    t = t + " <tr><td style='text-align:left' colspan='5'><hr></td></tr> ";
                });
                t = t + " </table> ";
                $("#stdData").html(t);
            },
            error: function(msg) { }
        });
    }


function onButtonClick() {
    var btnId = $(this).val();
    alert(btnId);
}

Answer 1

Just add the class name new-buttonto the buttons you create and add a click handler afterwards.

So replace this code

<input type='button' ID='btn"

with this

<input type='button' class="new-button" ID='btn"

You can remove onButtonClick () from the onclick event and replace

function onButtonClick() {
    var btnId = $(this).val();
    alert(btnId);
}

with

$(".new-button").live("click", function() {
    var buttonId = $(this).attr("id");
    alert(buttonId);
});

Answer 2

I'm not sure I understand your problem exactly, but you can try writing

var btnId = $(this).attr('id');

instead

var btnId = $(this).val();

id , .

,

Answer 3

, ".live()". , , html , . , , . - , , "dynamicButton", :

<input type='button' ID='btn" + item.studId + 
"' value='Delete' onClick='onButtonClick()'/>

:

<input type='button' ID='btn" + item.studId + 
"' value='Delete' class="dynamicButton"/>

:

$('input.dynamicButton').live('click', function (event) {
        alert($(this).attr('id'));
    });

, "dynamicButton" , .

Answer 4

- ID .............

onclick :

t = t + " <tr><td style='text-align:center'>" + item.studId + "</td><td style='text-align:center'>" + item.studName + "</td><td style='text-align:center'>" + item.studCourse + "</td><td style='text-align:center'>" + item.studUsn + "</td><td><input type='button' ID='btn" + item.studId + "' value='Delete' onClick='onButtonClick()'/></td></tr>";

:

t = t + " <tr><td style='text-align:center'>" + item.studId + "</td><td style='text-align:center'>" + item.studName + "</td><td style='text-align:center'>" + item.studCourse + "</td><td style='text-align:center'>" + item.studUsn + "</td><td><input type='button' ID='btn" + item.studId + "' value='Delete'/></td></tr>";

jQuery live ( ), , :

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

:

id, attr, , : $(this).attr('id') not val ( ), .

Answer 5

I did it using delegate(). In my case, the PHP script creates the contents of the page from the MySQL database. A button is added to each element (clicking these buttons allows you to delete the corresponding element from the database). Deletion is performed by another PHP script that is activated by these buttons, so an event is attached to each button click:

$('.items').delegate('[type="button"]', 'click', remove_item);

where the buttons are part of the class items, and remove_itemis the callback to delete.