jquery dynamically add div and bind elements

I have this pie开发者_C百科ce of html in my page.

<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>

I want to use jquery to dynamically add/repeat the contents of query_chunk div. Below is what I have so far, which obviously is not working! I am not very familiar with the jquery functions. Any pointers where I am going wrong?

$(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: I am trying to use similar idea of an already existing MooTools js script, may be there is an easier way to do the same in jquery?

---

Here's the working version of your code:

http://jsfiddle.net/9MRLQ/

The problem was that you were trying to .clone() and append() on query_chunks[0], which is not a jQuery object but an HTML element. So you needed to wrap it in $() first.

One more update

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

I replaced append() with an after(). Since append() adds content to query_chunks[0] next time you click "Add" you clone already modified query_chunk, so instead of adding one row you add two. Next time you click you add 4 and so on...

---

I had a similar question, here is a sample project that Muhammad Adeel Zahid gave me that did exactly what I wanted, it sounds like what your after too. "dynamically add rows using jquery'

This solution uses MVC3 though.

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