Question

我使用jQuery.ajax读取XML文件并将其呈现为HTML。

以下代码为XML中的每个数据记录生成一个按钮表：

$(xml).children('run').each(function() {
    var runname = $(this).children('name').text();

    buttonHtml = '<tr><td class="expbutton" id="runExpButton" onmousedown="myFunc(runname)">Click me</td></tr>';

    $('#Runs').append(buttonHtml);
});

在这里看到我想要达到的目标并不难。但显然它不起作用。

我的问题是我如何在jQuery中实现这一点？如果我使用.live或.on方法，则无法访问本地变量，例如“runname”。

[编辑]

尝试使用jQuery.data（）：

$(xml).children('run').each(function() {
    var runname = $(this).children('name').text();

    buttonHtml = '<tr><td class="expbutton" id="runExpButton" onmousedown="myFunc(runname)">Click me</td></tr>';
    $('#runExpButton').data('runname', runname);
    $('#Runs').append(buttonHtml);
});

$('#runExpButton').live('click',function() {
    alert($(this).data("runname"));
});

它似乎不起作用？只有一个按钮具有正确的数据值。

因为所有按钮都具有相同的ID，我怀疑.data（）不能用于此吗？

Answer 1

我相信您正在寻找的是jQuery .data()

您可以存储html元素的数据，然后在单击该元素时拉入该数据。

一个例子是

$(xml).children('run').each(function(index) {
    var runname = $(this).children('name').text();
    buttonHtml = '<tr><td class="expbutton" id="runExpButton'+index+'">Click me</td></tr>';
    $('#Runs').append(buttonHtml);
    $('#runExpButton'+index).data('runname', runname);
});

$(document).on('click', '.expbutton', function(){
     alert($(this).data('runname'));
});

我编辑了您的代码，为要添加到表格的每个单元格添加唯一ID。

Answer 2

您可以将HTML更改为

buttonHtml = '<tr><td class="expbutton" id="runExpButton" data-name="' + runname + '">Click me</td></tr>';

然后，正如Blake所说，使用$（element）.data（＆＃39; name＆＃39;）来获取该值。所以用.live绑定事件，读取数据名称，利润！

onmousedown动态生成的html元素

2 个答案: