Question

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

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);
});

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

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

Answer 1

试试这个

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

现在点击所有.cnfrmd_rcvd的活动工作。 Currnetly你是用#order_no_t

绑定点击事件

Answer 2

你的问题是id只能匹配一个元素，所以当你调用$（“＃order_no_tr”）时，它只会将click事件绑定到具有该id的第一个匹配的tr。将其切换为类，并绑定到该类：

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

Answer 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

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

Answer 4

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

Form1

Answer 5

我发现您正在ID #order_no_tr中搜索Click事件的问题，并且此ID是您的第一行表格中的原因，仅在第一行处理。

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

所以代码可能就像

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);
});

点击功能上的Jquery仅适用于第一行数据。

5 个答案: