2

我只是新来的。所以这就是我卡住的地方：

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

4 回答 4

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");
});
于 2012-09-24T09:04:06.257 回答
0

我想你可能想使用这个方法.on()：

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

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

于 2012-09-24T09:03:24.177 回答
0

您必须在创建表格后附加事件处理程序，而不是在文档准备好时（文档应该已经准备好，因为用户正在与之交互）。

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

}​
于 2012-09-24T09:08:43.303 回答
0

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

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

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

于 2012-09-24T09:08:44.067 回答