1

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

<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>

现在，我加载数据并用 ajax 函数填充 tbody：

var baseurl = '<?php echo HtmlHelper::getComponentPath(true); ?>';
var urlquery_ajax = '<?php echo RouteHelper::urlQueryWithRawAndToken('order&task=');?>';
var order_id = <?php echo $this->item->id;?>;
var kmx = jQuery.noConflict();
kmx().ready(function() {
/**
* Ajax call to load the products linked to the order
*/
function loadTableProducts() {
    var myProductTableBody = kmx('#body_orderproducts');
    myProductTableBody.empty();
    kmx.ajax({
        type: "POST",
        url: baseurl,
        cache: false,
        data: urlquery_ajax + "getOrderProductsInJsonFormatAjax&order_id=" + order_id,
        success: function(data){
                    data = kmx.parseJSON(data);
                    var myProductTableBody = kmx('#body_orderproducts');
                    populateTable(myProductTableBody, data);
                 },
         failure: function(msg){
                    msg = kmx.trim(msg);
                    alert('Error: ' + msg.responseText);
                  }
    });
}
/**
* Populate the table
*/
function populateTable(myTBodyObj, myData) {
    if (myData.rows.length > 1) {
        kmx.each(myData.rows, function(index,item) {
            myTBodyObj.append('<tr><td>' + item.number + '</td><td align="right">' + item.quantity + '</td><td><img id="delete_product_' + item.id + '" name="delete_product_' + item.id + '" class="kmx_image_delete" alt="<?php echo JText::_( 'Delete this product'); ?>" src="components/com_cmpningbo/assets/images/delete.png" /></td></tr>');
        });
    }
    else {
        myTBodyObj.append('<tr><td colspan="2" class="kmx_nodata"><?php echo JText::_( 'NO DATA.'); ?></td></tr>');
    }
    return;
}}
loadTableProducts();
});

一切正常，结果类似于： 表体加载成功

现在，我想添加一个代码来处理单击图像“删除”时的事件：

kmx('img[name^="delete_product_"]').live('click', function() {
        alert('click');
        return false;
    });

每个“删除”图像都有一个 id 和名称，例如：delete_product_XX，其中 XX 是要删除的记录的 ID。当表格主体以 ajax 加载时，该代码不起作用，但在页面加载（无 ajax）上加载表格主体时，该代码有效。我已经检查过这个问题，似乎关于图像的直播有问题？我不知道如何解决？任何的想法？

4

3 回答 3

2

由于您已经在所有删除按钮上都有一个公共类，您可以像这样创建一个委托事件处理程序，以使用一个事件处理程序来处理它们：

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
});
于 2012-04-10T03:35:12.267 回答
0

如果您使用单个类选择器绑定我们所有的删除图像，则可以使用“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 函数只需要查找添加到 DOM 中与该 CSS 类选择器匹配的所有新行。

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

click

12

最后一点，jQuery live 文档已经明确表示 live 已被弃用。它被“on”方法取代：

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。

jQuery 关于处理程序的使用与 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;
});

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

于 2012-04-10T03:37:52.977 回答
0

好的，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

于 2012-04-12T06:48:53.713 回答