Javascript Ajax函数用图像填充表格，但无法使用live进行选择

我有一个带有标题和空正文的表：

<table style="width:50%;" class="adminlist">
<thead>
<tr>
<th style="width:80%;">Number</th>
<th style="width:20%;">Quantity</th>
<th style="width:20%;"></th>
</tr>
</thead>
<tbody id="body_orderproducts">
<tr style="background-color: rgb(170, 170, 170);">                      <td class="kmx_nodata" colspan="3">NO DATA.</td>
</tr>
</tbody>
</table>

每个“删除”图像都有一个id和名称，如：delete_product_XX，其中XX是要删除的记录的id。 当在ajax中加载表体时，该代码不起作用，但当在页面加载（无ajax）中加载表体时，该代码起作用。

---

我已经检查了这个问题，似乎有一个关于图像的问题？我不知道怎么解决这个问题？有什么想法吗？

因为所有“删除”按钮上都有一个公共类，所以您只需创建一个委托事件处理程序，这样就可以用一个事件处理程序来处理所有这些事件：

kmx("#body_orderproducts").on('click', '.kmx_image_delete', function() {
    // you can examine the other cells in this row to get the desired ID
    // or you can parse it off the end of the image id
    var deleteID = this.id.replace("delete_product_", "");
    // now do whatever you want to do to process the deleteID
});

要使委托事件处理对动态创建的对象起作用，请将第一个选择器设置为非动态创建的静态父对象（在运行代码以安装事件处理程序时存在），并将第二个选择器设置为与动态创建对象相匹配的对象

仅供参考，

.live（）

已从所有版本的jQuery中弃用。对于jQuery 1.7+，建议使用

.on（）

。对于1.7之前的jQuery，建议使用

.delegate（）

。这是因为

.delegate（）

和

.on（）

都比

.live（）

更有效

对于1.7之前的jQuery版本，应该是：

kmx("#body_orderproducts").delegate('.kmx_image_delete', 'click', function() {
    // you can examine the other cells in this row to get the desired ID
    // or you can parse it off the end of the image id
    var deleteID = this.id.replace("delete_product_", "");
    // now do whatever you want to do to process the deleteID
});

---

如果您使用单个类选择器绑定所有的删除图像，那么您可以使用“this”关键字将DOM树爬升到顶层

tr

行元素，然后向下挖掘以获取您对删除操作感兴趣的项目

kmx('img.kmx_image_delete').live('click', function() {
    alert('click');
    alert("deleting row with id = " + kmx(this).parent().parent().find("td:first").html());
    return false;
});

由于live函数只需查找与CSS类选择器匹配的所有添加到DOM中的新行，因此运行起来也应该简单得多

使用此代码，如果我单击列表中的第二个删除图像，我将看到两个警报：

click

12

作为最后一点说明，已明确表示不推荐使用live。它被“on”方法取代：

从jQuery1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。较旧版本的jQuery用户应优先使用.delegate（），而不是.live（）

处理程序的用法与live非常相似：

kmx('img.kmx_image_delete').on('click', function() {
    alert('click');
    alert("deleting row with id = " + kmx(this).parent().parent().find("td:first").html());
    return false;
});

---

如果您仍然无法将live事件附加到删除映像，我强烈建议您升级到最新版本的jQuery，并尝试使用“on”。

好的，jfriend00提到的方法可以正常工作：

$kmx("#body_orderproducts").delegate('.kmx_image_delete', 'click', function() {
        var order_product_id = kmx(this).attr('id');
        order_product_id = order_product_id.replace('delete_order_product_', '');
        deleteProduct(order_product_id);
    });

但我不知道为什么live方法可以在我的应用程序的其他部分工作：

$('[class^="' + messageid_prefix + '"]').live('click', function() {
 var className = kmx(this).attr('className');
 var id = className.replace(messageid_prefix, '');
 [...]
});

---

JQuery 1.4

谢谢您的建议。我的删除图像已经有一个类，“kmx_image_delete”。事实上，我已经尝试了这个选择器，但它没有提示任何消息…然后请查看我的答案的第二部分。从jQuery1.7开始，live已不推荐使用。我自己也经历过一些车的行为。我的建议是要么在上使用（或者委托），要么在最坏的情况下，在加载元素后绑定事件。后一种解决方案是在添加映像后绑定事件，这只是我最后的选择，或者只是暂时地满足你的目标，直到你想出如何使用或委派。是的，你的建议是好的……但是我需要等待几个小时来为其他人发布解决方案……如果其中一个答案回答了你的问题，那么你应该考虑接受一个。但是，如果他们没有解决问题，而您不得不做其他事情，那么您发布解决方案是合适的。让你在回答自己的问题之前等待的想法是给社区时间来回答你的问题，并可能得到奖励/承认；否则，系统会被滥用。我使用JQuery 1.4.2，您的代码会产生错误：$（“#body_orderproducts”）。on不是一个函数。。。此功能仅适用于1.7…snif@YoongKim-然后，正如我的回答所说，您需要使用

.delegate（）

，因为1.4.2没有

.on（）

。有关参数顺序，请参见

.delegate（）

。它与

.on（）

的工作原理相同，参数的顺序不同。将来，如果您正在发布一个问题，并且正在使用旧版本的jQuery，您应该在问题中指定，因为人们几乎总是使用基于最新jQuery功能的答案进行回答。+1最好使用最新版本的库，除非您有很好的理由不升级。浏览器供应商继续推出对其平台的更新，jQuery团队定期发布以跟上变化。@YoongKim-我在回答中添加了一个版本，用于较旧版本的jQuery。

$kmx("#body_orderproducts").delegate('.kmx_image_delete', 'click', function() {
        var order_product_id = kmx(this).attr('id');
        order_product_id = order_product_id.replace('delete_order_product_', '');
        deleteProduct(order_product_id);
    });

$('[class^="' + messageid_prefix + '"]').live('click', function() {
 var className = kmx(this).attr('className');
 var id = className.replace(messageid_prefix, '');
 [...]
});