Problem with, jQuery add extra input form fields?

JavaScript
1

Hello
I tried, I do not know why this code does not work.
What is your comment?


$(document).ready(function () {
var i = $('#gasht b').size() + 1;

$('#add').click(function(event){
  event.preventDefault();
  $('<p><label for="gashte"><input type="text" id="gashte" size="20" name="gasht_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="rem">Remove</a></p>').appendTo('#gasht');
  i++;
  return false;
  });
});
2

Do you have some HTML code that the script is being used with, so that we may test things out?

3

Regardless of what the HTML is, it’s bad practice to create several nested HTML elements within a jQuery call like that. For example, creating the elements one at a time and chaining the methods reduces the work that jQuery has to do:


$("<p></p>").append(
  $("<label></label>")
    .attr("for", "gashte")
    .append(
      $("<input />")
        .attr({type: "text", id: "gashte", size: 20, name: "gasht_" + i, placeholder: "Input Value"})
    )
  )
  .append(
    $("<a></a>")
      .attr({href: "#", id: "rem"})
      .text("Remove")
  )
  .appendTo("#gasht");

That code is a little ugly with all the chaining; you can save newly created elements to variables instead to clean it up if you want. Regardless, it’s better than creating all those elements all at once in one jQuery call, which could potentially be why the code isn’t working, though I’d have to see the HTML to really know.