Question

我正在动态创建锚标签，我希望它们调用一个为每个标签设置一个参数的函数。

示例：

<div class="AnchorHolder">
   <a onclick="someFunction(1)">someText</a>
   <a onclick="someFunction(2)">someText</a>
   <a onclick="someFunction(3)">someText</a>
</div>

我试过

$("#AnchorHolder").append("<a>" + someText + "</a>").click(function (e) {
    someFunction(someIntVariable);
});

但是将所有锚点连接到IntVariables当前值，而我想要前面的那些。

我该如何做到这一点？

Answer 1

如果您只想点击新元素，请将其粘贴到该元素上，而不是#AnchorHolder元素：

var newAnchor = $("<a>" + someText + "</a>").click(function (e) {
  someFunction(someIntVariable);
});
$("#AnchorHolder").append(newAnchor);

或者，或者让每个<a>用他们的postion-inside-the-div调用someFunction：

$("#AnchorHolder a").each(function(idx) {
  var a = $(this);
  a.click(function() { someFunction(idx); });
});

Answer 2

好吧，我建议您尝试data属性。据我所知，它们是为那个porpuse而制造的。参见：

$("#AnchorHolder").append("<a href='#' data-myvar='" + someIntVariable + "'>" + someText + "</a>");

// Keep the event binding out of any loop, considering the code above will be called more than once...
$("#AnchorHolder").on('click', 'a', function (e) {
    alert($(this).data("myvar"));
});

Fiddle

Answer 3

您始终可以创建一个html元素，如下所示

   $('<a>').attr("onclick","fun('hi')").html('Some text').appendTo("#AnchorHolder");

希望这有帮助

动态创建元素并添加具有不同参数的函数。

3 个答案: