Question

我正在尝试使用jQuery创建一组按钮并给它们id，但是当我稍后尝试引用它们的id时，它似乎不起作用。我该怎么做才能解决它？

for(i=0;i<7;i++) {
    $("h2")
    .append('<input type="button" value="Display Answer">')
    .button()
    .attr("id", i);
};


$("button").click(function() {
    if($(this).attr("id") === "all") {
        for(i=0;i<answerArr.length+1;i++){
            $("#p" + i).text(answerArr[i-1]);
        }
    } else {
        $("#p" + $(this).attr("id")).text(answerArr[$(this).attr("id")-1]);
    }  
});

Answer 1

.append()返回调用它的元素，而不是新添加的元素。因此，您要在.button()元素上添加ID（并且还调用<h2>）。

尝试使用.appendTo()代替，并在创建元素时添加ID：

$('<input/>', {
    type: 'button',
    id: i,
    value: 'Display Answer'
}).appendTo('h2').button();

Answer 2

您正在设置h2 ID。这样做：

for(i=0;i<7;i++) {
 $("h2")
   .append('<input type="button" id="' + i + '" value="Display Answer">').button();
 }

Answer 3

首先，您可能正在寻找<button></button>元素，而不是<input/>。接下来，当引用以整数开头的元素的ID时，html和javascript往往会失去理智。所以这是我正在尝试做的版本：

for(i=0;i<7;i++) {
  $("h2")
      .append(
               $("<button/>", {'id':'_'+i).text("Display Answer") 
             )
      .button();
}

Answer 4

for(i=0;i<7;i++) {
$("h2")
.append('<input type="button" value="Display Answer" id="'+i+'">')
};

演示：

http://jsfiddle.net/PbEnC/

Answer 5

如果希望在每个按钮上调用处理程序，则需要在连接事件处理程序时更改选择器。而不是按钮使用 [type = button]

$("[type=button]").click(function() {
    if($(this).attr("id") === "all") {
        for(i=0;i<answerArr.length+1;i++){
            $("#p" + i).text(answerArr[i-1]);
        }
    } else {
        $("#p" + $(this).attr("id")).text(answerArr[$(this).attr("id")-1]);
    }  
});

此外，您可以在追加中设置按钮ID。

在jQuery中为ID动态创建按钮

5 个答案: