jquery dynamically add div and bind elements

Question

I have this piece 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?

Answer 1

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

• itsbalur: thanks. I got the code working. But there seems to be a logical problem. First time, I click on Add, it adds one div, the second time, it add two more ( I believe the first and the already added one). While, I need to add only one div on click of "Add". Any pointers?
• itsbalur: works like a charm! Thanks. one very last bit if you could help, what if I need to add it at the end, and not right after the first one?
• German Rumm: jsfiddle.net/9MRLQ/2 replace $(query_chunks[0]).after() with $('div.query_chunk:last').after()
• itsbalur: never mind. i figured it out. I did $("div.query_chunk:last").after(query_chunk);. Thanks again.

Answer 2

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