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

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

javascript jquery

Javascript jQuery-动态创建按钮和附加事件处理程序,javascript,jquery,Javascript,Jquery,我想使用jQuery动态地向表中添加一个按钮控件，并附加一个click事件处理程序。我尝试了以下方法，但没有成功： $("#myButton").click(function () { var test = $('<button>Test</button>').click(function () { alert('hi'); }); $("#nodeAttributeHeader").attr('style', 'display:

我想使用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>');
});

$（“#我的按钮”）。单击（函数（）{
var test=$（'test'）。单击（函数（）{
警报（“hi”）；
});
$（“#nodeAttributeHeader”）.attr（'style'，'display:table row；'）；
$（“#addNodeTable tr:last”）。之前（“”+test.html（）+“”）；
});
上面的代码成功地添加了一个新行，但无法正确处理添加按钮的操作。如何使用jQuery实现这一点？
您可以在按钮内部使用onclick来确保事件被保留，或者在按钮插入后通过查找按钮来附加按钮单击处理程序。test.html（）
调用将不会序列化事件。
您的问题是，将按钮添加到表中时，您正在将其转换为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);
});

$（“#我的按钮”）。单击（函数（）{
var test=$（'test'）。单击（函数（）{
警报（“hi”）；
});
$（“#nodeAttributeHeader”）.css（'display'，'table row'）；//注意：已更改
var tr=$（''）.insertBefore（'#addNodeTable tr:last'）；
var td=$（''）.append（测试）.appendTo（tr）；
});
调用.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);
});

您刚刚添加了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>


一排
第2排
$（文档）.ready（函数（）{
var test=$（'test'）。单击（函数（）{
警报（“hi”）；
});
$（“#addNodeTable tr:last”）.append（“”）.find（“td:last”）.append（test）；
});
快速修复。
创建整体结构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);
});

$（“#我的按钮”）。单击（函数（）{
var test=$（'test'）。查找（'button'）。单击（函数（）{
警报（“hi”）；
}).end（）；
$（“#nodeAttributeHeader”）.attr（'style'，'display:table row；'）；
$（#addNodeTable tr:last”）。在（测试）之前；
});
没有必要.end（）
那条链。它是。find（'button'）将只返回button元素，但您需要整个tr>td>button结构：）啊-我明白了-以确保返回的值是
本身？有用：）@Matt Ball:为什么需要终端end（）
呢？哦，没关系。如果你不关心返回的值，那么它在最后是没有用的。FWIW，我不喜欢你做单击作为元素创建的扩展的方式-我认为。单击（）更直观，记录也更好。任何一种方式都可以。我还可以展示如何使用链接。现在您添加了额外的属性，这就更有意义了
<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>

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