Автоматически вызывать плагин jQuery для динамически создаваемого элемента

Question

Мне нужно применить плагин jQuery к элементу HTML, который будет создан после ввода пользователя. Например:

<!-- Upon click, this link creates a new div with an id of 'target'. -->
<a id="trigger-a" href="javascript:void(0);">Create a new div</a>

/* This will not work because div#target isn't available yet upon page load. */
$(function() {
  $("div#target").aJQueryPlugin( ... );
});

В простейшей форме я могу вызвать плагин в обработчике кликов <a> после создания div.

$(function() {
  $("#trigger-a").click(function() {
    // Create div#target.

    // I can call the plugin here but is there a different, maybe better, way?
    $("div#target").aJQueryPlugin( ... );
  });
});

Однако, если возможно, я ищу что-то более «автоматическое»; возможно, используя .on(), который автоматически вызывает плагин, как только элемент становится доступным?

Перефразируя вопрос: В jQuery есть способ «отслеживать», когда определенный элемент становится доступным (т.е. после его создания)? Если есть, то я бы вызвал плагин или другие функции в качестве обратного вызова.

Answer 1

Может как то так?

HTML

<a id="trigger-a" href="javascript:void(0);">Create a new div</a>

<div class="cont"></div>

JS

$("#trigger-a").click(function () {
    var $div = $('<div>', {class: 'target', text: 'text'});
    $('.cont').append($div);
    $div.trigger('divCreate');
});

$('.cont').on('divCreate', 'div.target', function () {
    $(this).append('added by event')
});

http://jsfiddle.net/Q2UYC/

Запуск пользовательского события позволяет позднее связать обработчик событий.

Answer 2

Вы можете использовать 'DOMNodeInserted', который не является событием jQuery.

$(document).bind('DOMNodeInserted', function(event) {

//write your stuff here to check if desired element was inserted or not.

    alert('inserted ' + event.target.nodeName + // new node
        ' in ' + event.relatedNode.nodeName); // parent
});

Answer 3

Если вы должны проверить наличие элемента перед вызовом плагина, вы можете попробовать что-то вроде этого:

$('#click-here').click(function() {
    $(this).after('<button class="new-button">I am a new button</button>');

    var checkElement = setInterval(function() {
        if ($('.new-button').length) {
            $('.new-button').button({'label': 'I am a new fancy button'});
            clearInterval(checkElement);
        }
    }, 200);
});

Вы можете видеть, что это работает здесь .

Обратите внимание, что функция .button является инициализацией плагина jQuery UI, поэтому она также должна работать для нужного вам плагина. Вам также следует изменить второй аргумент setInterval на что-то другое, 200 - просто показать задержку.

Answer 4

Если вы не можете подключить плагин одновременно с созданием элемента (например, и далее , предложенные в их комментарии), по какой-либо причине я бы посоветовал использовать плагин Брэндона Аарона LiveQuery:

http://brandonaaron.net/code/livequery/docs

... Live Query также имеет возможность вызывать функцию (обратный вызов), когда она соответствует новому элементу, и другую функцию (обратный вызов), когда элемент больше не соответствует. Это обеспечивает максимальную гибкость и невероятные варианты использования.

Надеюсь, это полезно:)

Answer 5

Мне также было бы интересно увидеть код, который вставляет новый объект DOM. Давайте предположим, что это что-то вроде этого: (вы действительно не должны использовать обработчики onclick)

$("#trigger-a").click(function() {
    $(this).after('<div id="someDiv"></div>');

    $that = $("#someDiv");

    $that.ajQueryPlugin(...);
});

Это лучшее, что я могу сделать, не видя больше информации ...

Нажмите на триггер, вставьте новый div, возьмите этот объект и запустите на нем плагин. В основном вы работаете с div во время создания , вам не нужно «мониторить».

Answer 6

jQuery's delegate и on оба хороши для этого.Обратите внимание, что если вы используете более старые версии jQuery, вы можете использовать delegate, но если вы используете последнюю версию (1.7+), вам нужно использовать on.

С ними вы должны вызвать метод, используя уже загруженный элемент, и использовать параметр, чтобы указать элемент, который вызывает событие.Чтобы сделать его максимально эффективным, этот элемент должен быть ближайшим родителем для динамически создаваемого элемента.

Например, если щелкнуть тег привязки, вы помещаете div с идентификатором 'target' в контейнер, которыйбыл загружен до вызова on с идентификатором 'container', ваш вызов on должен быть.

$('#container').on('click', '#target', function(){ $(this).pluginCall(); });

Вы не можете просто позвонить on на #target div, потому чтоэтот элемент еще не был загружен.

Другое решение - поместить встроенную функцию $(document).ready() в динамически создаваемый контент, который вызывает ваш плагин.В этом случае вам не понадобится on или delegate, но это будет работать только для загруженных в данный момент элементов.В первом примере любой экземпляр #target, который создается из любого вызова ajax, будет обработчиком click.

Answer 7

Вы можете использовать live() или on() для этого

$(document).ready(function(){
    $('div#target').on('click',function(){});
});