Question

我尝试在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>

Answer 1

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

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

Answer 2

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

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 () { ...

Answer 3

使用事件委派。而不是将click事件绑定到a中的每个td：

$("#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!");
});

Answer 4

将脚本更改为以下内容：

     $(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.. 
});

Answer 5

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

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

PS：每当你必须动态创建元素时，你应该尝试使用委托。

按ID选择动态控制

5 个答案: