jQuery Добавить динамическую таблицу с доступными строками

Я немного новичок в jQuery, и я вижу примеры добавления динамических TRs для динамических TRs в существующие таблицы, но как я могу добавить полностью новую таблицу динамически с кликабельными TR?jQuery Добавить динамическую таблицу с доступными строками

Мой HTML-код:

<input type="text" id="containing"><div id="results"></div>

Мой JQuery код, который Посылает ввода и возвращает новый HTML таблицу в результаты DIV:

$("#containing").on("keyup", function() 
{ 
$.post("http://URL.com/search.php", { searcher: $(this).val() },function(data, textStatus) 
{ 
    $("#results").html(data); 
}); 
});

search.php возвращает следующий формат:

<table id="resultantTable"><tr><a href="..."></a><td></td></tr></table>

... и дополнительный код jQuery, который должен позволить мне щелкнуть по новым строкам таблицы, ч не работает:

$(document).ready(function() 
{ 
$("#resultantTable").on('click','tr',function() 
{ 
    var href = $(this).find("a").attr("href"); 
    if(href) 
    { 
    window.location = href; 
    } 
}); 
});

Этот код JQuery работает для таблиц, которые загружаются с документом, но я не могу получить TRs быть интерактивным в динамически созданной таблице, которая возвращается из search.php.

Любые идеи?

источник

2014-10-05 Highdel

Вы должны добавить слушатель на родителе. Пример:

$(document).on('click', '#resultantTable tr', function(e){ 
    //ToDo... 
});

источник

2014-10-05 20:03:45 tenhsor

Это прекрасно работает, @tenhsor, за исключением теперь мой следующий фрагмент кода, фактическая переадресация из встроенного якоря в TR, терпит неудачу, поскольку он ссылается на $ (this), а $ (this) больше не нажимает фактическую строку: var href = $ (this). найти ("а") атр ("HREF"). if (href) { window.location = href; } Как перенаправить страницу на ссылку, которая находится на якоре TR, который был нажат? – Highdel

$ (this) Он должен дать вам элемент, который вы нажали, могу ли я увидеть формат resultTable, чтобы увидеть, что происходит. – tenhsor

Собственно, я понял это. В других случаях я могу привязываться за пределами '', например:' '. Для динамического контента, хотя, я должен закрепить внутри '' , как ''. Не знаете, почему это так, но он работает. Спасибо, что помогли! – Highdel

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

$('body').on({ 
    click: function(){ 
    ... 
    } 
}, '#resultantTable tr')

источник

2014-10-05 19:57:13 OryanM

Это прекрасно работает, @OryanM, за исключением того, что я ссылаюсь на родителя, как я могу вытащить привязную ссылку и перенаправить на нее? Код, который я использую для других таблиц, существующих при загрузке документа, имеет прямые имена имен, которые не являются динамическими, поэтому я могу ссылаться на них, вызывая $ (this). Как я могу перенаправить к нажатому TR в вашем «...»? Спасибо! – Highdel

$ (this) предоставит вам элемент, затем вы можете найти и перенаправить ссылку, вложенную внутри нее, с помощью window.href = $ (this) .find ('a') – OryanM

Это происходит потому, что события были зарегистрированы до того, как существует содержание ajax. (resultantTable не существует при первом загрузке DOM)

Попробуйте добавить свою функцию после $ ("# results"). html (data);

это хорошая практика, в вашем АЯКС вызова, что вы будете слушать о событиях успеха/ошибки

Добавить рендер и выберите Задания внутри успешных событий.

См JQuery документация о том, что

источник

2014-10-05 20:00:15 Fabrizio

jQuery Добавить динамическую таблицу с доступными строками

ответ

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