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