jquery动态添加div并绑定元素

Question

我的页面中有这段 html。

<p><a href="#" id="addQueryPart" >Add</a></p>
    <div id="query_part">
        <div class="query_chunk" id="query_chunk_1">
            <select class="parameter" id="parameter_1" name="parameter_1">
                <option title="Keyword Anywhere" value="Anywhere">Keyword Anywhere</option>
                <option title="Author or Contributor" value="Contributor">Author or Contributor</option>
                <option title="Title" value="Title">Title</option>
                <option title="Subject" value="Subject">Subject</option>
            </select>
            <input class="keyword" id="keyword_1" name="keyword_1" type="text" />
            <a href="#" class="remove" id="remove_1" name="remove_1"  title="Remove">[-]
                </a>
        </div>
    </div>

我想使用jquery动态添加/重复query_chunk div的内容。以下是我到目前为止所拥有的，这显然不起作用！我对 jquery 函数不是很熟悉。有什么指示我哪里出错了吗？

$(document).ready(function () {

    Init = new function () {
        this.construct = function () {
            Actions.bind();
        }

        query_chunks = $("div.query_chunk");
        term_count = query_chunks.size();

    }

    Actions = new function () {
        this.bind = function () {

            $("#addQueryPart").bind("click", function () {

                var query_chunk = query_chunks[0].clone().attr({ 'class': 'query_chunk', 'id': 'query_chunk_' + (++term_count) });
                var search_param_select = $("select", query_chunk).attr({ 'class': 'parameter', 'id': 'parameter_' + (++term_count) });
                var keyword = $("input", query_chunk).attr({ 'class': 'keyword', 'id': 'keyword_' + (++term_count) });
                var removebtn = $("a", query_chunk).attr({ 'class': 'remove', 'id': 'remove_' + (++term_count) });
                query_chunks[0].append(query_chunk);
                keyword.bind("click", function () {
                    alert("Click event fired");
                });

            });
        }
    }
    Init.construct();
});

PS：我正在尝试使用现有 MooTools js 脚本的类似想法，可能有更简单的方法在 jquery 中执行相同操作吗？

Answer 1

这是代码的工作版本：

http://jsfiddle.net/9MRLQ/

问题是你尝试在 query_chunks[0] 上执行 .clone() 和 append()，它不是 jQuery 对象，而是 HTML 元素。所以你需要先将它包装在 $() 中。

还有一个更新

http://jsfiddle.net/9MRLQ/1/

我用 after() 替换了 append()。由于 append() 将内容添加到 query_chunks[0] ，下次您单击“添加”时，您克隆了已修改的 query_chunk，因此无需添加一个行添加两个。下次单击时，您将添加 4 个，依此类推...

Answer 2

我有一个类似的问题，这是 Muhammad Adeel Zahid 给我的一个示例项目，它完全符合我的要求，听起来也像你所追求的。 “使用 jquery 动态添加行”

不过，此解决方案使用 MVC3。

http://www.esnips.com/doc/63cc65e3-0bc9-409d-a6ef-795985e58d32/Master-Detail3