Как отловить создание элементов DOM и манипулировать ими с помощью jQuery - PullRequest
Новая
       2

Как отловить создание элементов DOM и манипулировать ими с помощью jQuery

2 голосов
/ 06 февраля 2011

Я пытаюсь разработать метод, при котором при добавлении простого элемента div с классом и некоторыми данными в нем * он заменит его или добавит в него некоторые другие элементы.Этот метод не должен вызываться вручную, но автоматически каким-либо методом .live () jQuery, пользовательским событием или чем-то вроде $ ('body'). Bind ('create.custom') и т. Д. Мне нужно этоКстати, я не знаю заранее, какие элементы будут созданы, поскольку они будут обслуживаться через ajax, например, одиночные пустые div или p. 

<!DOCTYPE html>
<html>
    <head>

        <title >on create</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>

        <script type="text/javascript" >

            jQuery(function($){
                $("div.fancyInput").each(function(index,element){

                    var $div = $(this);
                    var dataId = $div.attr("data-input-id");
                    var inputId = '';
                    var labelId = '';
                    if(!!dataId){
                        inputId = 'id="' + dataId + '"';
                        labelId = 'id="' + dataId + 'Label"';
                    } // if

                    var dataValue = $div.attr();

                    $(
                        '<p class="fancyInput" >' +
                        '    <label ' + labelId + ' for="' + inputId + '" >A fancy input</label>' +
                        '    <input ' + inputId + ' name="' + inputId + '" value="A fancy input" />' +
                        '</p>'
                    ).appendTo($div);               
                }); // .each()
            }); // jQuery()
        </script>

        <script type="text/javascript" >

            jQuery(function($){
                var counter = 2;
                var $form = $('#form');
                $('#add').click(function(event){
                    $('<div class="fancyInput" data-input-id="fancyInput' + counter + '" ></div>').appendTo($form);
                    counter++;
                }); // .click
            }); // jQuery()

        </script>
    </head>
    <body>

        <a id="add" href="#" > add another one </a>
        <form id="form" action="#" >

            <p class="normalInput" >
                <label id="normalInputLabel" for="normalInput" >A normal input</label>
                <input id="normalInput" name="normalInput" value="A normal input" />
            </p>

            <div class="fancyInput" ></div>

        </form>
    </body>
</html>

Обновление: Я предварительно проверил liveQuery,мне нужны именно такие функциональные возможности, но с возможностью изменять элементы DOM во время выполнения обратного вызова события.Так что мне нужны не только события, а возможность изменять DOM при создании элемента.Например: всякий раз, когда создается новый, он должен быть заполнен (даже лучше, если его заменить) тегами p, label и input

1 Ответ

4 голосов
/ 06 февраля 2011

Вы можете использовать DOM Level 3 Event, например, DOMNodeInserted.Это может выглядеть так: 

$(document).bind('DOMNodeInserted', function(event) {
    // A new node was inserted into the DOM
    // event.target is a reference to the newly inserted node
});

В качестве альтернативы вы можете воспользоваться .liveQuery help jQuery plugin.

обновление

Ссылаясь на ваш комментарий, взгляните на http://www.quirksmode.org/dom/events/index.html, единственный браузер, который его не поддерживает - это Internet Explorer этого мира (по крайней мере, IE9).

Я не могу много сказать о производительности, но она должна работать довольно хорошо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...