Функция Jquery on click работает только для первой строки данных.

Question

У меня есть таблица, которая автоматически генерируется с данными из базы данных и создается с помощью jquery. Это создается с помощью следующего переменного тра, которая прилагается к основному 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); 
}); 

Теперь у меня есть вопрос с на функции мыши, он работает только с первой строкой сгенерированной таблицы , Как я могу заставить функцию onclcick работать со всеми элементами функции onclick? Ниже приведена функция onclcick, которая опирается на идентификатор tr, чтобы получить подтвержденный идентификатор заказа.

$("#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 вы связываете событие click с #order_no_t

Answer 2

Ваша проблема в том, что идентификатор может соответствовать только одному элементу, поэтому, когда вы вызываете $ ("# order_no_tr"), он свяжет событие click только с первым совпадающим tr с это id. Включите его в класс, а и привязать к этому:

$(".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. Ваш код должен быть

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

Answer 5

Я считаю, что проблему вы ищите событие щелчка в ID #order_no_tr и этот идентификатор для первой строки таблицы Yours, что причина его работой только на первом ряду.

Другая идея состоит в использовании класса для каждой строки

Так код может быть как

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