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/

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

再次更新

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

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

Answer 2

我有一个类似的问题，这是穆罕默德·阿德尔·扎希德给我的一个示例项目，它完全符合我的要求，听起来就像你的追求。 “使用jquery'

动态添加行

此解决方案使用MVC3。

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

jquery动态添加div和bind元素

2 个答案: