jQuery on click 功能仅适用于第一行数据。答案

【问题标题】：Jquery on click function only works for the first row of data.jQuery on click 功能仅适用于第一行数据。
【发布时间】：2016-01-27 07:13:04
【问题描述】：

我有一个使用数据库中的数据自动生成并使用 jquery 创建的表。这是使用附加到主 tbody 的以下 tr 变量创建的：下面是我的代码：

var list = " <tr id='order_no_tr'><td id='order_no_td" + item.documentno + "'>" + item.documentno + "</td><td>" + item.progressstatus + "</td><td>" + newDate + "</td>\n\
                                <td><button type='button' id='cnfrmd_rcvd" + item.c_order_id + "' class='btn btn-default btn-sm cnfrmd_rcvd" + item.c_order_id + "' >Confirm Received</button>\n\
        <input type='hidden' name='order_no_txt' id='order_no_txt" + item.c_order_id + "' value='" + item.c_order_id + "' class='order_no_txt" + item.c_order_id + " btn btn-primary'/>\n\
        </td></tr>";
$("#order_no_tbody").append(list);
$("#order_no_tr").on("click", ".cnfrmd_rcvd" + item.c_order_id, function() {
    var order_no = this.value;
    alert(order_no);
});

现在我遇到了关于点击功能的问题，它只适用于生成表的第一行。如何使 onclcick 函数与 onclick 函数的所有条目一起使用？下面是依赖 tr id 来获取已确认订单 id 的 onclcick 函数。

$("#order_no_tr").on("click", ".cnfrmd_rcvd" + item.c_order_id, function() {
    var order_no = this.value;
    alert(order_no);
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

试试这个

$(document.Body).on("click", ".cnfrmd_rcvd" + item.c_order_id, function() {
    var order_no = this.value;
    alert(order_no);
});

现在点击事件适用于所有 .cnfrmd_rcvd。当前，您正在将单击事件与#order_no_t

绑定

【讨论】：

【解决方案2】：

您的问题是 id 只能匹配一个元素，因此当您调用 $("#order_no_tr") 时，它只会将 click 事件绑定到具有该 id 的第一个匹配的 tr 。将其切换到一个类并绑定到该类：

$(".order_no_tr").on("click", ".cnfrmd_rcvd", function(ev) { ....

【讨论】：

【解决方案3】：

由于你是动态创建行，你应该使用事件委托来处理事件：

   $('#order_no_tbody').on('click',".cnfrmd_rcvd" + item.c_order_id,function(){
    var order_no = this.value;
    alert(order_no);

   })//if #order_no_tbody is not created by js

您的代码不起作用，因为您试图将事件处理程序附加到尚不存在的元素。使用事件委托允许您将事件处理程序附加到其已存在的父元素。

【讨论】：

【解决方案4】：

您不能对页面中的多个元素使用相同的 id。如果这样做，浏览器将只考虑第一个元素。使用类而不是 ID。你的代码应该是

var list = " <tr class='order_no_tr'><td id='order_no_td" + item.documentno + "'>" + item.documentno + "</td><td>" + item.progressstatus + "</td><td>" + newDate + "</td>\n\
                                <td><button type='button' id='cnfrmd_rcvd" + item.c_order_id + "' class='btn btn-default btn-sm cnfrmd_rcvd" + item.c_order_id + "' >Confirm Received</button>\n\
        <input type='hidden' name='order_no_txt' id='order_no_txt" + item.c_order_id + "' value='" + item.c_order_id + "' class='order_no_txt" + item.c_order_id + " btn btn-primary'/>\n\
        </td></tr>";
$("#order_no_tbody").append(list);
$(".order_no_tr").on("click", ".cnfrmd_rcvd" + item.c_order_id, function() {
    var order_no = this.value;
    alert(order_no);
});

【讨论】：

【解决方案5】：

我发现您在 ID #order_no_tr 中搜索点击事件的问题是，此 ID 用于您的表的第一行，这是它仅在第一行上工作的原因。

其他想法是为每一行使用类

所以代码可能是这样的

var list = " <tr class='order_no_tr'><td id='order_no_td" + item.documentno + "'>" + item.documentno + "</td><td>" + item.progressstatus + "</td><td>" + newDate + "</td>\n\
                                <td><button type='button' id='cnfrmd_rcvd" + item.c_order_id + "' class='btn btn-default btn-sm cnfrmd_rcvd" + item.c_order_id + "' >Confirm Received</button>\n\
        <input type='hidden' name='order_no_txt' id='order_no_txt" + item.c_order_id + "' value='" + item.c_order_id + "' class='order_no_txt" + item.c_order_id + " btn btn-primary'/>\n\
        </td></tr>";
$(".order_no_tbody").append(list);
$(".order_no_tr").on("click", ".cnfrmd_rcvd" + item.c_order_id, function() {
    var order_no = this.value;
    alert(order_no);
});

【讨论】：