Обновление события javascript при загрузке AJAX нового HTML

Question

Я загружаю новый HTML-код на свою страницу, используя такой шаблон:

$.post("templates/single.html", function(data){
    $("#feed").append(
        data.replace( /{{title}}/ , "Title")
            .replace( /{{subtitle}}/ , "Subtitle")
            .replace( /{{text}}/ , val.fragment)
    );
});

Этот запрос выполняется несколько раз, поэтому возвращаемое «data» содержит теги div с class = "togglethis».Я хочу добавить прослушиватель событий с помощью jQuery, который слушает те классы, по которым щелкают.

Естественно, я бы добавил прослушиватель событий, например этот

$.post("templates/single.html", function(data){
    $("#feed").append(/*skipped code here*/);

    $(".content").hide();
    $(".togglethis").click(function(){
        $(this).siblings(".content").slideToggle();
    });
});

сразу после фида $ ("#) .append () - часть, но затем событие, которое вызывается столько раз, сколько загружено шаблонов. То есть, если я загружу 25 элементов с этим шаблоном, «содержимое» рядом с «переключателем» будет переключаться туда и обратно 25 разперед остановкой.

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

Answer 1

Описание

Ваши div создаются динамически, поэтому, в зависимости от используемой вами версии jQuery, вам нужен метод jQuery.live() или jQuery.on()

jQuery.live () начиная с jQuery 1.3 обработчик событий для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем.

jQuery.on () начиная с jQuery 1.7 - Присоединить функцию обработчика событий для одного или нескольких событий к выбранным элементам.

Sample

$(".togglethis").live("click", function(){
    $(this).siblings(".content").slideToggle();
});

или

$(".togglethis").on("click", function(){
    $(this).siblings(".content").slideToggle();
});

Дополнительная информация

• jQuery.live ()
• jQuery.on ()

Answer 2

Вы можете использовать функции jQuery .live() или .on().Оба эти события автоматически перепривязывают события для загруженного контента.

Answer 3

Вот как это выглядит сейчас, что-то не так?

$(".togglethis").on("click", function(){
    $(this).siblings(".content").slideToggle();
});

$.post("templates/single.html", function(data){
    $("#feed").append(
        data.replace( /{{title}}/ , "Title")
            .replace( /{{subtitle}}/ , "Subtitle")
            .replace( /{{text}}/ , val.fragment)
        );
    $(".content").hide();
});

Answer 4

Использовать live синтаксис jQuery:

$(".togglethis").live('click', function(){
    $(this).siblings(".content").slideToggle();
});