Выберите строку из сгенерированной таблицы html.

В этом stack есть решение выбрать и выделить целую строку из таблицы с помощью jQuery. У меня есть обратный вызов (см. Нижнюю часть моего скрипта), когда я нажимаю строку на таблице. Проблема в том, что моя таблица генерируется из данных, поэтому обратный вызов не работает на сгенерированные ячейки. Обратный вызов работает с заголовками, которые не генерируются.Выберите строку из сгенерированной таблицы html.

Как подключить существующий обратный вызов к вновь созданным элементам?

<style> 
.selected { 
    background-color: brown; 
    color: #FFF; 
} 
</style> 

<body> 
<table id="table" border="1" ContentEditable> 
    <tbody id="tablebody">      
    <tr> 
     <th>Date</th> 
     <th>Number</th> 
    </tr>      
    </tbody> 
</table> 
<button onclick="generateTable()">generateTable</button> 

<script> 
function generateTable() { 
    var tbl = document.getElementById('table') 
    var tbdy = document.getElementById('tablebody') 
    //Table elements 
    var arr={Date: "my date", Number:"my number"} 
    var tr = document.createElement('tr'); 
    for (el in arr) {  
    var td = document.createElement('td'); 
    var t = document.createTextNode(arr[el]); 
    td.appendChild(t); 
    tr.appendChild(td); 
    } 
    //append line to tbody 
    tbdy.appendChild(tr); 
    tbl.appendChild(tbdy); 
} 


jQuery("#table tr").click(function(){ 
    console.log("this works only when clocking on the headers <th>") 
    jQuery(this).addClass('selected') 
    .siblings().removeClass('selected'); 
});

источник

2015-09-20 aless80

Вы пытались изменить jQuery ("# table tr"). Click (function() ... To: jQuery ("# table tr"). On ('click', function() .. – ItayB

@ ItayB Это точно то же самое. – epascarello

@epascarello Делегированные события имеют то преимущество, что они могут обрабатывать события из потомков, которые добавляются в документ позже. From: http://api.jquery.com/on/ – ItayB

Это идеальный вариант использования для event delegation шаблона. То есть вместо определения обратных вызовов для каждого отдельного элемента (в вашем случае, каждой строки таблицы) вы определяете обратный вызов вашего клика на родительском элементе (таблице).

Таким образом, когда произойдет событие щелчка, оно вызовет пузырьковое дерево dom, и родительский элемент сможет ответить на него.

Пример:

// Attach a delegated event handler 
$("#table").on("click", "tr", function(event) { 
    event.preventDefault(); 
    ... 
});

Это позволяет прикрепить один обработчик события щелчка для всех текущих и будущих строк таблицы.

источник

2015-09-20 03:03:44 Anchor

Спасибо, намного лучше, чем мой обходной путь. Один вопрос: я буду изучать, как работают события, но мне нужно event.preventDefault()? – aless80

Выберите строку из сгенерированной таблицы html.

ответ

Смежные вопросы