Question

我正在动态创建一些按钮并为它们分配ID。

当有人点击该按钮时，我想从那里收集ID 执行一些任务。

这是我正在进行的工作

$(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

只需将new-button的班级名称添加到您正在创建的按钮中，然后再添加点击处理程序。

请替换此代码

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

使用此

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

您可以从onclick事件中删除onButtonClick（）并替换

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

<强>与

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

Answer 2

我不确定我完全理解你的问题，但你可以尝试写

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

而不是

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

这将为您提供单击按钮的id属性，而不是表单元素的值。

我希望这会对你有所帮助

Jerome Wagner

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')而非val（用于获取输入元素的值）喜欢你的代码。

Answer 5

我是使用delegate()完成的。在我的例子中，PHP脚本从MySQL数据库生成页面的内容。对每个元素添加一个按钮（单击这些按钮可以从数据库中删除相应的元素）。删除由这些按钮激活的另一个PHP脚本处理，因此click事件附加到每个按钮，如下所示：

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

其中按钮是items类的一部分，remove_item是删除的回调。

将click事件分配给动态添加的按钮

5 个答案: