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生成）说一个单击函数以便提醒一个简单的“Hello”，我该怎么做？我的代码似乎不起作用：

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

Answer 1

使用.live()（对于较旧的jquery版本 - ＆lt; v1.7）：

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

或者：

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

使用.on()（对于新的jquery版本 - ＆gt; = 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号。

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

4 个答案: