如何通过通过Javascript创建的html对象（按钮）使用jQuery执行事件？

Question

我只是新来的。 因此，这就是我遇到的问题：

我使用javascript创建了一个html表。 我有一个按钮，单击该按钮会创建一组结构完全相同的表，但是这些表中的对象（例如按钮，文本）具有不同的ID。 现在，当我尝试使用jQuery并在其中一个生成的表上使用按钮来执行click函数时，它将无法正常工作。 我怎么在这里转转？ 提前致谢！

这是一个示例函数，可在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生产）中绑定处理程序，则说一个单击功能以提醒一个简单的“ Hello”，我该怎么做？ 我的代码似乎不起作用：

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

Answer 2

我认为您可能想使用.on()方法：

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

有关更多信息，请查看在线文档： http : //api.jquery.com/on/

Answer 3

您必须在创建表后附加事件处理程序，而不是在文档准备就绪时附加事件处理程序（由于用户正在与之交互，因此文档应该准备就绪）。

当然，您可以使用jQuery来做到这一点，但请看一下本机方法-jQuery可能过于肿，具体取决于您要执行的操作，并且您将学到一些有关DOM的知识。

我在下面添加了一些代码，使您可以添加回调并显示一些可以轻松取回的内容。 这并不是您所要的，而是在DOM中找到自己的出路的一个很好的开始。

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>"
    }
    var placeholder = document.getElementById('HtmlPlaceHolder').innerHTML = html;
    placeholder.innerHTML = html;
    placeholder.addEventListener('click', function (e) {
       console.log(this, e);
    }

}​

Answer 4

我会在HtmlPlaceHolder上使用委托来检查单击事件，如下所示：

$("#HtmlPlaceHolder").on("click", "input[type=button]", function() {
    alert($(this).attr("id"));
});

另外，我将按钮id方案更改为btnALERT_1，因此您可以使用.split("_")方法提取ID号。