0

我尝试通过 Jquery 在表中动态创建两个相同的元素，但 Id 是问题。我尝试根据元素编号创建一个 Id，var id = "links" + i; 但是，我无法通过 $(“#”) 选择这个元素，即使我使用“Links1”作为 id 选择器。我不知道有什么问题。

<script type="text/javascript">
    $(function () {
        var number = 2;
        for (var i = 0; i < number; i++) {
            var id = "links" + i;
            var item = $("<td><a id ='" + id + "'>" + i + "</td>");
            $("#" + id).click(function () {
                alert("Great");
            });
            $("#TrInput").append(item);
        }
    });
</script>

<body>
<form id="form1" runat="server">
<div>
<table><tr id="TrInput"></tr></table>
</div>
</form>

4

5 回答 5

3

在您绑定$('#' + id)时，该元素在 DOM 中不存在。所以它不绑定点击处理程序。

相反，绑定到item.click或仅在调用后绑定append。或者，您可以使用事件委托并绑定到，document但对于该解决方案，最好查找 jQuery 事件委托并查看它是如何工作的。

于 2013-07-16T17:28:53.767 回答
1

您可以直接在刚刚创建的项目上添加侦听器...

var item = $("<td><a id ='" + id + "'>" + i + "</td>");
item.click(function () {
      alert("Great");
});
$("#TrInput").append(item);

有些人提到使用委托，这对于您创建 ID 和通过 ID 访问的当前方式来说不是很实用。我会使用一个类来选择，如下所示：

var item = $("<td><a id ='" + id + "' class='itemClass'>" + i + "</td>");

然后您可以像这样更改您的活动选择器：

$("#form1").on("click", ".itemClass", function () { ...
于 2013-07-16T17:29:02.490 回答
0

使用事件委托。而不是将事件绑定到您click的每个：atd

$("#TrInput").on("click", "a", function(e) {
  e.preventDefault(); //just in case
  alert("hi!");
});

因此，由于您tr已经存在，因此很乐意在a单击时委派事件处理。而且，如果你tr也是动态的，你会做这样的事情：

$("table").on("click", "tr a", function(e) {
  e.preventDefault(); //just in case
  alert("hi!");
});
于 2013-07-16T17:30:00.823 回答
0

将您的脚本更改为以下内容：

     $(function () {
            var number = 2;
            for (var i = 0; i < number; i++) {
                var item = $("<td><a id ='links'>" + i + "</td>");
                $("#TrInput").append(item);
            }
        });

创建项目后，使用 on/delegate 方法，因为 click 不适用于动态创建的元素；因此，下一行代码将是：

$("#links").on("click",function(){
// As now you have two elements with the same ID, make use of: this property; 
   Suppose you want to change the color of that clicked element, that would be:
$(this).css("color","#0777da");
//This effects only the currently selected/clicked element and
  not every other element with the same Id.. 
});
于 2013-07-16T18:01:44.490 回答
-1

在您绑定时，DOM 中不存在该元素。所以它没有绑定点击处理程序，因为没有要绑定的元素。因此，一种简单的解决方案是使用委托。现在，使用委托的美妙之处在于，无论何时创建元素，处理程序都会被分配给元素。这应该为您解决问题。

$(document).on('click','#Links1', function(){
    alert('test');
});

PS：每当您必须在旅途中（动态）创建元素时，您都应该尝试使用委托。

于 2013-07-16T17:30:26.223 回答