Question

最初，当页面加载时，我用jQuery搜索这样的东西：

<label for="first_name">name</label>
<input type="text" name="first_name" />

将html改为发烧友。

当我尝试将这些元素动态插入DOM时，问题就出现了。由于没有任何内容绑定到新创建的元素，我不确定什么是运行我的“调整”函数的正确方法。我不会简单地想要破解它并在插入后立即手动调用adjust_html1()，adjust_html2()等。

插入html后运行代码的最有条理和最有效的方法是什么？

（旁注：如果有办法只在新的HTML 上运行，会更酷）

修改：添加了“for”

编辑2 ：这是我在文档就绪时运行的示例jQuery代码：

$('label').each(function() { /* do stuff */ });

Answer 1

您可以结帐livequery plugin：

$('[name="first_name"]').livequery(function() {
    alert('A node with name=first_name was injected into the DOM');
    adjust(this);
});

Answer 2

使用live()绑定方法。

为与当前匹配的所有元素附加事件的处理程序选择器，现在和将来。

Answer 3

像这样创建你的html：

var elem = $('<p></p>').text('hello').appendTo(document.body);
adjust_html(elem);

Answer 4

好吧，也许我没有解释我想要的正确。目的是基本上能够在新插入的html上运行一组函数 - 高效，无需手动调用它们。

现在我将使用下面编写的代码。最初，您的页面上有模板，并且您将某些选择器（存在于模板内部）的功能绑定到所有模板。因此，当您将模板插入页面时，这些选择器会尝试匹配模板内部，并运行绑定函数。

以下代码既无效率，也未经优化或经过全面测试。所以，我不会接受它作为最终答案。它只是一个示例解决方案，无论如何都是hacky。但它的确有效。我确信backbone.js或者某个插件做得更好，所以我会等待JS大师以正确的方式展示。

作为旁注：我意识到有两个缺点： a）设置html的方式必须通过模板对象完成，而不是自然的jQuery方式，并且< strong> b）模板插入到DOM中，然后才开始在其上运行。我的第一个版本在插入之前确实在模板上工作，但是像.replaceWith()这样的函数在字符串上的工作方式与在DOM节点上完全不同。从好的方面来说，代码很小，并且正是我想要的。

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

        window.template = {
            queue: {},
            set: function(container, content) {

                /* first insert content */
                container.html(content);

                /* now run a list of functions in the queue */
                $.each(this.queue, function(s, fs) {
                    var el = $(s, container);
                    for (var i = 0, len = fs.length; i < len; ++i)
                        el.each(fs[i]);
                });

            },
            bind: function(selector, func) {
                if (typeof this.queue[selector] === 'undefined')
                    this.queue[selector] = [];
                /* push function to queue for that specific selector */
                this.queue[selector].push(func);
            }
        };

        $(function() {

            var templateContents = $('#my-template').html();

            /* for each <label>, replace it with another <input> */
            template.bind('label[for="first_name"]', function() {
                $(this).replaceWith('<input type="text" name="last_name" value="last name" />');
            });

            $('a').click(function(e) {

                e.preventDefault();
                $('body').append('<div class="container"></div>');

                /* get the div that we just appended to body */
                var newDiv = $('.container').last();

                /* set that newDiv's html to templateContents, and run binded functions */
                template.set(newDiv, templateContents);

            });

        });

    </script>
</head>
<body>
    <script id="my-template" type="text/template">
        <label for="first_name">name</label>
        <input type="text" name="first_name" />
    </script>
    <a href="#">add dynamically</a>
</body>
</html>

如何在插入元素时有效地执行JavaScript函数？

4 个答案: