Question

hey guys I have the follow code in js:

$(document).ready(function(){
$(".replyLink").click(function(){
    $("#form-to-"+this.id).html(htmlForm()).toggle(500);
return false;
});
function htmlForm(){
    var html;
    html ='<form class="comment-form" id="form-post" action="request.php" method="post">';
    html +='<input type="hidden" name="post_id" value="" />';
    html +='<input type="hidden" name="reply" value="" />';
    html +='<table><tr><td>Name:</td><td>';
    html +='<input class="name" type="text" name="name" size="20" maxlength="30"/>';
    html += ......
return html;
}

//this is not working!//////////////////////////////////////////
$(".comment-form input,.comment-form textarea").focus(function(){
    $(this).css({
        'background-color': 'white',
        'border':'1px solid #3faefc',
        'box-shadow': '0px 0px 2px 1px #95d3ff'
    });
});
/////////////////////////////////////////////////////////////
});

HTML i have link for e.x:

<a href='#' class="replyLink">Reply</a>

and when I click this a form toggle “somewhere” but i can not have control the element on the htmlForm() with about code!
Tnx

Answer 1

You can’t bind event handlers directly on elements that don’t (yet) exist. Probably the simplest change to fix this is to create all the forms up front in your document ready handler rather than creating them one at a time in the “.replyLink” click handler. Note that currently every time your click handler is called it recreates the form by setting the parent “#form-to-…” element’s html, regardless of whether it already existed.

$(document).ready(function(){
   // create the forms up front
   $('[id^="form-to-"]').html(htmlForm());

   $(".replyLink").click(function(){
       $("#form-to-"+this.id).toggle(500); // don't set html here, just toggle
       return false;
   });

   function htmlForm(){
    /* your existing function body here */
   }

   $(".comment-form input,.comment-form textarea").focus(function(){
      /* your existing CSS setting code here */
   });
});

If for some reason that doesn’t fit with how you want to do things I can think of three other ways to get around this problem:

1. Bind the focus event within your “.replyLink” click handler, after it creates the form elements.

2. Use delegated event handling, i.e., use .delegate() or .on() (or .live() if you have a really old version of jQuery) instead of .focus() to attach the event handler to a parent element that does exist. This will then automatically apply to elements added later.

3. Don’t create the form element dynamically. Have the form in your initial html markup and .hide() or .show() it when required.