JQuery код не работает после загрузки Ajax

Question

Недавно я написал Skript JQuery (тумблер), который работает для меня:

$("input[id^='show_Fulltext']").click(function(){ 
    $("#Fulltext".concat($(this).val())).toggle('Drop'); 
    }); 

Вот окружающий HTML код (смешанный с рубином):

<%= @final[0..175]%><div id="Fulltext<%=@count%>" style="display:none;"><%=@final[176..@final.length]%></div> 
    <% if @final.length > 176 %> 
    <a><input type="image" src="" alt="[...]" value='<%=@count%>' id='show_Fulltext<%= @count%>'></input></a> 
    <% end %> 

Я коротко объясню, что он делает. Если текст в рубиновой переменной @final больше, чем 175, весь текст с надписью помещается в div с идентификатором FulltextX. FulltextX - это запущенное число, так как существует несколько этих полей, и я не хочу иметь одинаковый идентификатор.

Хорошо, пока все хорошо - все работает. Теперь у меня есть несколько таких div с идентификаторами Fulltext1, Fulltext2, Fulltext3 и т. Д. И я могу переключать каждый из них, если у них больше символов, чем 175. Работает отлично.

Теперь моя проблема: я могу изменить, какие из этих текстов показаны. Это также делается в JQuery. Ну, теперь проблема. После изменения страницы моя функция Toggle больше не работает.

Я нашел очень хороший блог, объясняющие, как я мог это исправить: http://blog.codebusters.pl/en/click-doesn-t-work-after-ajax-load-jquery/

Я предполагаю, что это именно то, что я должен сделать, чтобы исправить эту проблему. К сожалению, на данный момент я действительно застрял, адаптировав свой код к данному примеру в только что упомянутом блоге.

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

Answer 1

Вы регистрируете обработчики кликов для элементов, которые уже существуют, но динамически создаются (возможно, с использованием ajax-вызова), элементы не получат этот обработчик кликов.

Вы должны зарегистрировать нажмите обработчик событий для динамически создаваемых элементов с использованием .on(), как показано ниже код

$(document).on("click", "input[id^='show_Fulltext']", function(){ 
    $("#Fulltext".concat($(this).val())).toggle('Drop'); 
}); 

Приведенный выше код будет работать для динамически добавлять, а также на странице нагрузки созданных элементов.