Как динамически генерируемые элементы

0

Я использую плагин jQuery dForm для динамического создания полей формы.

Для событий я знаю, что могу получить доступ к этим полям

$(document).on("click","#id", function(){});

Но если я хочу, скажите

$("#id").after("<div></div>");

Тогда как мне это сделать? я пробовал

$("#id").after("<div></div>").trigger("create");

Хотя я не совсем понимаю, что он делает, безрезультатно.

Благодарю.

Теги:

3 ответа

1
Лучший ответ

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

Итак, скажем, вы создаете div динамически с идентификатором test. Вы можете добавить этот div к простому $("#test").append("<span>see, new span</span>"); , так как к моменту запуска этой команды элемент существует. Надеюсь, это поможет.

Поделиться
  • 0
    То есть нет разницы в том, что элемент был добавлен динамически или из исходного HTML?
  • 1
    Нет, ты бы нацелился на это так же. Вы можете использовать .on() если хотите обработать событие для этого динамического элемента. Но простой таргетинг на добавление такой же, как и всегда. @SatoBolin
Показать ещё 6 комментариев
1

Ваш вопрос недостаточно ясен, но только из предположения, я думаю, вы хотите динамически добавить div а также хотите зарегистрировать event для этого div, если это так, тогда вы можете сделать это так же, но есть и другие пути.

$("#id").after($("<div/>", {
    'id':'test',
    'click':function() { alert ("Clicked!"); }
}));

DEMO.

Другой подход для этого (храните обработчик событий, зарегистрированный таким образом, используя #test)

$(document).on("click", "#test", function(){
    alert ("Clicked!");
});

Вставьте новый div

$("#id").after($("<div/>", { 'id':'test'}));

DEMO.

Кроме того, если вы хотите динамически создавать/вставлять новый div и хотите инициировать событие click на этом новом div сразу после его вставки, вы можете попробовать это

$(function(){
    $(document).on("click","#test", function(){
        alert ("Clicked!");
    });

    // insert a new div with id 'test' and invoke click event immediately
    var div = $("<div/>", { 'id':'test'});
    $("#id").after(div);
    div.trigger('click');
});

DEMO.

Поделиться
  • 0
    Спасибо за ваш вклад. Я хотел бы сделать что-то вроде: $ ("# test"). Append ("<span> см., Новый span </ span>"); Просто сейчас у меня это не работает.
  • 0
    Это работает , новый span вставлен в новый div#test .
1

Это работает, потому что оно реагирует на событие:

$(document).on('click', '#id', function(){});

Причина в том, что события пересекают всю структуру DOM, от конкретного элемента вплоть до родительского документа/окна. Поэтому в этом случае jQuery назначает прослушиватель событий вместо document, а затем фильтрует события с помощью селектора. Поэтому даже если элементы динамически добавляются после факта, их все равно поймают, потому что они все еще передают свои события до document.

Это, однако, не отвечает на событие:

$('#id').after('<div></div>');

Это просто выбор элемента, выполнение действия, а затем его выполнение. Поэтому, если этот элемент не находится в DOM, это действие не выполняется.

На самом деле это не так. Если вы хотите, чтобы каждый $('#id') добавлял '<div></div>' то в любое время, когда вы удаляете элемент id и повторно добавляете его, вам нужно снова вызвать эту строку кода.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню