javascript - 如何通过通过 Javascript 创建的 html 对象(按钮)使用 jQuery 执行事件？

Question

我是新来的。所以这就是我被困的地方:

我使用 javascript 创建了一个 html 表格。我有一个按钮，单击该按钮将创建一组具有完全相同结构的表，但这些表中的对象(例如按钮、文本)具有不同的 ID。现在，当我尝试使用 jQuery 和生成的表格之一上的按钮执行点击功能时，它不会工作。我怎么去这里？提前致谢!

这是一个在 javascript 中创建 html 表(具有唯一 ID)的示例函数:

function CreateTables() {

    var html = ' ';
    var valPrompt = prompt("How many tables would you like to add?");
    parseInt(valPrompt);
    for (i = 1; i <= valPrompt; i++) {

        html += "<table>" + "<tr>" + "<td>" + "Text goes here" + "</td>" + "<td>" + "<input type='text' id='txtTEXT" + i + "'/>" + "</td>" + "<td>" + < input type = 'button'
        id = 'btnALERT" + i + "' / > +"</td>" + "</tr>" + "</table>"
    }
    document.getElementById('HtmlPlaceHolder').innerHTML = html;
}​

因此，如果我们查看代码，如果执行函数 CreateTables，将创建​​具有唯一 ID 的按钮 (btnALERT) 表集。为了选择对象，我想我会使用 jQuery。因此，例如，如果我在 btnALERT1(由 CreateTables 生产)中绑定(bind)一个处理程序说一个点击功能以提醒一个简单的“你好”，我将如何执行此操作？我的代码似乎不起作用:

$(document).ready(function() {
    $('#btnALERT1').click(function() {
        alert("Hello");
    });
});​

Answer 1

使用.live() (对于旧的 jquery 版本 - < v1.7):

$('#btnALERT1').live('click', function()
{
   alert("Hello");
});

或者:

$(document).delegate('#btnALERT1', 'click', function() 
{
   alert("Hello");
});

使用.on() (对于新的 jquery 版本 ->= 1.7):

$(document).on('click', '#btnALERT1', function()
{
   alert("Hello");
});