将点击事件分配给动态添加的按钮答案

【问题标题】：Assigning click event to dynamically added buttons将点击事件分配给动态添加的按钮
【发布时间】：2010-09-16 06:46:30
【问题描述】：

我正在动态创建一些按钮并为其分配 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);
}

【问题讨论】：

嗨 Umakanta.Swain，你能在 jsfiddle 上分享你的最终工作代码吗？谢谢。

标签： jquery click live

【解决方案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);
});

【讨论】：

不客气 - 查看有关如何使用该网站的常见问题解答，如果我解决了您的问题 - 勾选此答案左侧的绿色勾号
因为 jquery 1.9 而不是 live 你应该使用“on”

【解决方案2】：

我不确定我是否完全理解您的问题，但您可以尝试编写

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

而不是

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

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

希望对你有帮助

杰罗姆·瓦格纳

【讨论】：

【解决方案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”类的按钮，无论它是如何添加到页面的，都会调用这个处理程序。

【讨论】：

【解决方案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（用于获取输入元素的值），就像您在代码中一样。

【讨论】：

他的按钮被命名为#btn1、#btn2等。定位#btn会失败，即使所有的按钮都被称为#btn，它也是无效的标记，IE只会选择1个元素.请参阅上面的课程解决方案。

【解决方案5】：

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

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

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

【讨论】：