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

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

快速解决.创建整个结构tr> td>按钮; 然后找到里面的按钮; 附上活动; 结束链的过滤,然后将其插入到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 3

您的问题是,当您将按钮添加到表格时,您将按钮转换为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);
});