jquery - Counter for adding a nested form in Rails 3? -

i'm using nested form gem in rails 3 app: https://github.com/ryanb/nested_form. i'm able add/remove "audience fields" in form. audience model belongs upload model.

what i'd able count number of times audience fields added in form. so, example, form display "audience 1" above audience fields. if add audience field, "audience 2" displayed, , on.

application.js

var n = $("div.audiencefields").length;   $("span").text("audience " + n); 

what doing wrong?

edit:

application.js

  $("#removelink").hide().filter(":first-child").show();    $("div.audiencefields span").each(function(index, element) {   $(this).text("audience " + (index + 1));}); 

nested_form.js

jquery(function($) { window.nestedformevents = function() { this.addfields = $.proxy(this.addfields, this); this.removefields = $.proxy(this.removefields, this); };  nestedformevents.prototype = { addfields: function(e) {   // setup   var link    = e.currenttarget;   var assoc   = $(link).attr('data-association');            // name of child   var content = $('#' + assoc + '_fields_blueprint').html(); // fields template    // make context correct replacing new_<parents> generated id   // of each of parent objects   var context = ($(link).closest('.fields').closestchild('input:first').attr('name') || '').replace(new regexp('\[[a-z]+\]$'), '');     // context brand new form:   // project[tasks_attributes][new_1255929127459][assignments_attributes][new_1255929128105]   // or edit form:   // project[tasks_attributes][0][assignments_attributes][1]   if (context) {     var parentnames = context.match(/[a-z_]+_attributes/g) || [];     var parentids   = context.match(/(new_)?[0-9]+/g) || [];      for(var = 0; < parentnames.length; i++) {       if(parentids[i]) {         content = content.replace(           new regexp('(_' + parentnames[i] + ')_.+?_', 'g'),           '$1_' + parentids[i] + '_');          content = content.replace(           new regexp('(\\[' + parentnames[i] + '\\])\\[.+?\\]', 'g'),           '$1[' + parentids[i] + ']');       }     }   }    // make unique id new child   var regexp  = new regexp('new_' + assoc, 'g');   var new_id  = new date().gettime();   content     = content.replace(regexp, "new_" + new_id);    var field = this.insertfields(content, assoc, link);   $(link).closest("form")     .trigger({ type: 'nested:fieldadded', field: field })     .trigger({ type: 'nested:fieldadded:' + assoc, field: field });   return false; }, insertfields: function(content, assoc, link) {   return $(content).insertbefore(link); }, removefields: function(e) {   var link = e.currenttarget;   var hiddenfield = $(link).prev('input[type=hidden]');   hiddenfield.val('1');   // if (hiddenfield) {   //   $(link).v   //   hiddenfield.value = '1';   // }   var field = $(link).closest('.fields');   field.hide();   $(link).closest("form").trigger({ type: 'nested:fieldremoved', field: field });   return false; } };    window.nestedformevents = new nestedformevents(); $('form a.add_nested_fields').live('click', nestedformevents.addfields); $('form a.remove_nested_fields').live('click', nestedformevents.removefields); });   // http://plugins.jquery.com/project/closestchild /* * copyright 2011, tobias lindig * * dual licensed under mit (http://www.opensource.org/licenses/mit-license.php) * , gpl (http://www.opensource.org/licenses/gpl-license.php) licenses. * */ (function($) { $.fn.closestchild = function(selector) { // breadth first search first matched node if (selector && selector != '') {   var queue = [];   queue.push(this);   while(queue.length > 0) {     var node = queue.shift();     var children = node.children();     for(var = 0; < children.length; ++i) {       var child = $(children[i]);       if (child.is(selector)) {         return child; //well, found 1       }       queue.push(child);     }   } } return $();//nothing found };    })(jquery); 

new.html.erb

  <%= f.fields_for :audiences |audience_form| %>   <div class="audiencefields">   <span></span>   <p>        <%= audience_form.label :number_of_people %><br />     <%= audience_form.text_field :number_of_people %>   </p>   <p>     <%= audience_form.label :gender %><br />     <%= audience_form.text_field :gender %>   </p>   <p>     <%= audience_form.label :ethnicity %><br />     <%= audience_form.text_field :ethnicity %>   </p>   <p>     <%= audience_form.label :age %><br />     <%= audience_form.text_field :age %>   </p>   </div>    <%= audience_form.link_to_remove "remove this", :id => "removelink" %>   <% end %>    <p><%= f.link_to_add "add this", :audiences, :id => "addlink" %></p> 

i create answer comments don't allow formatting code

if that file using there on lines 69-71 can find following code

window.nestedformevents = new nestedformevents(); $('form a.add_nested_fields').live('click', nestedformevents.addfields); $('form a.remove_nested_fields').live('click', nestedformevents.removefields); 

this bind click events add , remove links. in custom script bind events in same way. executed once above completed. code should this

$('form a.add_nested_fields, form a.remove_nested_fields').live('click', function(){      $("div.audiencefields span").each(function(index, element) {         //index starts 0         $(this).text("audience " + (index + 1));     });  });