使用jQuery插入表单

Question

I have a simple form (text input + submit button) that should show up when you click on any div whose class is rep.

$(document).ready(function(){
    $("div.rep").click(function(){
      $(this).removeClass('rep'); // Remove the class
      $(this).append("<form action='output.php' method='post'><input type='text' name='reply'><input type='submit'></form>"); // Add the form
    });
  });

Removing the class on line three is important because clicking on the div again or selecting the new form in it should not create another new form. It seems to succeed in removing the class, since it loses its CSS outline after I click it, but it still creates another new form when I click the div again or click the form inside it, as if it still had the class. Is there a way I can prevent this?

Here are some other things I've tried unsuccessfully:
.html() instead of .append() (This causes it to unfocus the text box immediately after it's clicked)
</div> before the form code inside of .append() and .html() (jQuery parses this out so it has no effect)

Thanks in advance for your help!

Answer 1

$("div.rep").click means "find an element with the rep class, then bind a function to that element's click element, even if the class is gone when the click happens". You want "run a function every time a click event occurs on an element that currently has the rep class".

You can do this with the on function:

$(document.body).on('click', 'div.rep', function() {
    // function content
});

on binds the event to an ancestor element, in this case the document's body element. All click events are caught there. If one originated from an element that matches the selector div.rep , the function is run.

Answer 2

That's because event handlers are bound to elements not to their class names, you should unbind the event or use .one() method:

$("div.rep").one('click', function() {

However, if you have to bind a handler to the elements that have .rep class names, you can use event delegation:

$('#aStaticParentElement').on('click', 'div.rep', function() {
    $(this).removeClass('rep');
    // ...
});