无法在功能中识别名称选择器

Question

I am creating dynamic inputs when a user clicks a button. This is creating the inputs ok, but in my function, it is not responding to the name I have assigned. In other words, not firing the function. There are no errors in firebug or any other console I use. Am I using the name selector in the correct way?.

I would be grateful if someone could point out why this function is not firing. Many thanks

UPDATE : I finally managed to solve it like this:

$('input[name="box_add[]'+FieldCount+'"]').inputlimiter({
    limit: 1,
    limitBy: 'words',
    remText: 'You only have %n word%s remaining...',
    limitText: '<b><font color=\"red\">Field limited to %n box%s.</font></b>'
    });

Function to create the inputs. This is working ok

$(function() {

  var MaxInputs       = 19; //maximum input boxes allowed
  var InputsWrapper   = $("#INTKInputsWrapper"); //Input boxes wrapper ID
  var AddButton       = $("#INTKAddMoreFileBox"); //Add button ID

  var x = InputsWrapper.length; //initlal text box count
  var FieldCount=1; //to keep track of text box added

  $(AddButton).click(function (e)  //on add input button click
  {
  if(x <= MaxInputs) //max input box allowed
  {
  FieldCount++; //text box added increment
  //add input box
  $(InputsWrapper).append('<div><input style="margin-left: 16px; margin-bottom: 12px; width: 250px; height:30px;" type="text" class="boxadddef" name="box_add[] '+FieldCount+'" required="required" /><a href="#" class="removeclass"><img src="/domain/users/css/images/redclose.png" style="margin-left: 10px; margin-right:10px;" /></a><span class="removespan" style="margin-left:2px;font-size:10px;color: grey;">Remove</span></div>');
  x++; //text box increment
  }
  return false;
  });

  $("body").on("click",".removeclass", function(e){ //user click on remove text
  if( x > 1 ) {
  $(this).parent('div').remove(); //remove text box
  x--; //decrement textbox
  FieldCount--;
  }
  return false;
  }) 

  });

Function that is incorrect

$(function() { 
  $('input[name="box_add[]"]').inputlimiter({
        limit: 1,
        limitBy: 'words',
        remText: 'You only have %n word%s remaining...',
        limitText: '<b><font color=\"red\">Field limited to %n box%s.</font></b>'
    }); 
  });

Answer 1

Two possibilities.

1. Note this from your input markup:

    $(InputsWrapper).append('...name="box_add[] '+FieldCount+'"...'); // ^^^^^^^^^^^^^^^^^^^^^^^^^^ 

   That will result in a names like box_add[] 0 (note the space), box_add[] 1 , etc.. But you're looking for name="box_add[]" , which obviously wouldn't match.

   My gut says you didn't really want the field count there, but if you really did, you might want to use the attribute-starts-with selector instead: name^="box_add[]" .

2. Ensure you're doing the latter code block once all the input s have been created.