Применение функции jQuery для динамически добавленного элемента

Question

Мой вопрос в основном the same as this one (который не получил должного ответа).

Как я могу использовать функцию jQuery для элемента, который я добавляю динамически?

В частности, я хочу использовать jquery tablesorter plugin на таблице, которую я загружаю на страницу динамически, после того, как пользователь что-то делает.

Вот мой код:

results_html += "<table id='results' class='tablesorter><thead>"; 
[My table contents go here, ommitted for this question] 
results_html += "</tbody></table>"; 
$('#book_results').html(results_html); 
$("#results").tablesorter(); 

Там нет JS ошибки на странице, но функция TableSorter не применяется. Что я могу сделать?

Спасибо!

Answer 1

Глядя на этот код, я могу только думать о двух причинах, которые не работают:

1. Если results не уникальный идентификатор на странице.

2. Если опечатка в открытии линии на самом деле в вашем коде (вам не хватает закрытия ' после класса «TableSorter»:

   results_html += "<table id='results' class='tablesorter><thead>"; 
                   // ^-- here 
   

Фундаментально, это работает: http://jsbin.com/ikebu4/2 Это Безразлично» t выглядит так, потому что я не включил ни один из CSS-сортировщика таблиц, но он функциональный, если вы нажмете заголовки столбцов. В основном существует уже существующая таблица, а затем кнопка, чтобы добавить ее динамически. .

Answer 2

Tablesorter имеет три gger, которую вы можете вызвать, чтобы добавить tablesorter в динамически добавленный элемент. См. Здесь Ajax example. Нечто подобное должно работать для вас:

$("#results").tablesorter(); 
$("#results").trigger("update"); 

Иногда вам нужно позвонить $("#results").trigger("appendCache");. Я еще не понял почему.