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

我是新来的。这就是我被困的地方：

我使用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;
}​

---

我想您可能需要使用（）上的方法

。

：

有关更多信息，请查看在线文档：

使用（对于较旧的jquery版本- 或：

使用（对于新的jquery版本->=1.7）：

---

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

当然，您可以使用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);
    }

}​

函数CreateTables（）{
var html=''；
var valPrompt=prompt（“您希望添加多少表？”）；
parseInt（valPrompt）；
对于（i=1；i++）
}
var placeholder=document.getElementById（'HtmlPlaceHolder'）。innerHTML=html；
占位符.innerHTML=html；
占位符.addEventListener（'click'，函数（e）{
console.log（this，e）；
}
}​

我会在HtmlPlaceHolder上使用一个委托来检查点击事件，如：

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

---

另外，我会将按钮id方案更改为btnALERT_1，这样您就可以使用

.split（“”）

方法提取id号。

您的valPrompt值仍然是字符串，您应该将其保存到变量中。valPrompt=parseInt（valPrompt）这正是我需要的。感谢您的帮助！

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

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

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

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

}​

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