Question

我想使用jQuery动态地向表中添加一个按钮控件并附加一个click事件处理程序。我尝试了以下内容，没有成功：

$("#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实现这一目标？

Answer 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'); });

Answer 2

您的问题是，当您将按钮添加到表格中时，您将按钮转换为HTML代码段，但该代码段与其上包含点击处理程序的不是同一个对象

$("#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); });

Answer 3

快速修复。创建整个结构tr＆gt; td＆gt;按钮;然后找到里面的按钮;附上活动;结束链的过滤，然后将其插入到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);
});

Answer 4

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

Answer 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>

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

5 个答案: