jQuery - 动态创建按钮和附加事件处理程序答案

【问题标题】：jQuery - Dynamically Create Button and Attach Event HandlerjQuery - 动态创建按钮和附加事件处理程序
【发布时间】：2011-06-01 17:26:33
【问题描述】：

我想使用 jQuery 将按钮控件动态添加到表中并附加单击事件处理程序。我尝试了以下方法，但没有成功：

$("#myButton").click(function () {
    var test = $('<button>Test</button>').click(function () {
        alert('hi');
    });

    $("#nodeAttributeHeader").attr('style', 'display: table-row;');
    $("#addNodeTable tr:last").before('<tr><td>' + test.html() + '</td></tr>');
});

上面的代码成功添加了一个新行，但它没有正确处理添加按钮。我将如何使用 jQuery 完成此任务？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

调用.html() 会将元素序列化为字符串，因此所有事件处理程序和其他相关数据都会丢失。这是我的做法：

$("#myButton").click(function ()
{
    var test = $('<button/>',
    {
        text: 'Test',
        click: function () { alert('hi'); }
    });

    var parent = $('<tr><td></td></tr>').children().append(test).end();

    $("#addNodeTable tr:last").before(parent);
});

或者，

$("#myButton").click(function ()
{    
    var test = $('<button/>',
    {
        text: 'Test',
        click: function () { alert('hi'); }
    }).wrap('<tr><td></td></tr>').closest('tr');

    $("#addNodeTable tr:last").before(test);
});

如果您不喜欢将属性映射传递给$()，您可以改用

$('<button/>')
    .text('Test')
    .click(function () { alert('hi'); });

// or

$('<button>Test</button>').click(function () { alert('hi'); });

【讨论】：

FWIW，我不喜欢您将 click 作为元素创建的扩展的方式 - 我认为 .click() 更直观，并且有更好的文档记录。
任何一种方式都可以。我也可以展示如何使用链接。
现在你已经添加了额外的属性更有意义

【解决方案2】：

快速修复。创建整个结构 tr > td > button;然后在里面找到按钮；在其上附加事件；结束链的过滤，并插入到dom中。

$("#myButton").click(function () {
    var test = $('<tr><td><button>Test</button></td></tr>').find('button').click(function () {
        alert('hi');
    }).end();

    $("#nodeAttributeHeader").attr('style', 'display: table-row;');
    $("#addNodeTable tr:last").before(test);
});

【讨论】：

没有必要.end() 那个链。
是的。 find('button') 将只返回按钮元素，但你需要整个 tr>td>button 结构:)
啊 - 我明白了 - 确保返回的值是 <tr> 本身？有用:)
@Matt Ball：为什么需要终端 end()？
哦，没关系。如果你不关心返回的值，它只有在最后也没用。

【解决方案3】：

您的问题是，当您将按钮添加到表格时，您正在将按钮转换为 HTML sn-p，但是 sn-p 与具有点击处理程序就可以了。

$("#myButton").click(function () {
    var test = $('<button>Test</button>').click(function () {
        alert('hi');
    });

    $("#nodeAttributeHeader").css('display', 'table-row'); // NB: changed

    var tr = $('<tr>').insertBefore('#addNodeTable tr:last');
    var td = $('<td>').append(test).appendTo(tr);
});

【讨论】：

【解决方案4】：

您可以在按钮内部使用 onclick 以确保事件被保留，或者在插入按钮后通过查找按钮来附加按钮单击处理程序。 test.html() 调用不会序列化事件。

【讨论】：

【解决方案5】：

您只是添加了 html 字符串。不是您使用单击事件侦听器创建的元素。

试试这个：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
    <table id="addNodeTable">
        <tr>
            <td>
                Row 1
            </td>
        </tr>
        <tr >
            <td>
                Row 2
            </td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function() {
        var test = $('<button>Test</button>').click(function () {
            alert('hi');
        });
        $("#addNodeTable tr:last").append('<tr><td></td></tr>').find("td:last").append(test);

    });
</script>

【讨论】：