Robin, your suspicion is pretty close to the mark. When you add your event
handler to the last row of the table, you are doing it at that moment in
time only. Whatever is the last row then, that is where your event handler
will be. Adding a new row to the table does not magically change any of
that.
You could probably use the LiveQuery plugin, but I think in this case it's
just as easy - and much more efficient - to use event delegation. You add
the event handler to the table itself, so it will always see the events for
any row of the table, even newly added rows. Later, when you receive an
event, you check it to see if it came from the actual last row at that time.
Something like this:
$(function() {
// When last input-text is click/selected, add new row
$('#ws').focus(function( event ) {
if( $(event.target).is('#ws tr:last *') ) {
$('#ws').append( $('#ws tr:last').clone() );
return false;
}
});
});
One other note - I changed the table#ws selectors to just #ws, which should
be much more efficient since jQuery optimizes that case to use
document.getElementById. (At least this used to be the case; I haven't
checked the code in a while.)
-Mike
> -----Original Message-----
> From: jquery-en@googlegroups.com
> [mailto:[EMAIL PROTECTED] On Behalf Of Robin Gruyters
> Sent: Tuesday, July 22, 2008 12:52 AM
> To: jQuery (English)
> Subject: [jQuery] for input cloning
>
>
> Hello all,
>
> I have the following thing, I want to create a form page
> where people (mostly me) can manage the weekly worked hours.
>
> I have created a table and within the table I have put input elements.
> (see example below)
> When a user using (focus();) any of the input elements in the
> last table row, I want to copy the whole row and add it below
> the last row.
>
> Although I have it working, it doesn't remove the action from
> the first row. The copying (in my case cloning) only works on
> the first row.
>
> I think this has probable to do with the initial state of the
> document, and that jQuery doesn't know about the new added
> role. (I think... I could be wrong...)
>
> [html]
> ...
> <div id="content">
> <div id="form">
> <form action="" method="post">
> <table id="ws">
> <thead>
> <tr>
>
> <th>Day</th>
>
> <th>Project</th>
>
> <th>Activity</th>
>
> <th>Start</th>
>
> <th>End</th>
>
> <th>Duration</th>
>
> <th>Distance</th>
>
> <th>%</th>
> </tr>
> </thead>
> <tbody>
> <tr>
>
> <td><input type="text" name="date" size="2" maxlength="2"></
> input></td>
>
> <td><input type="text" name="project" size="8"
> maxlength="8"></input></td>
>
> <td><input type="text" name="activity" size="24"
> maxlength="24"></input></td>
>
> <td><input type="text" name="btime" size="8" maxlength="8"></
> input></td>
>
> <td><input type="text" name="etime" size="8" maxlength="8"></
> input></td>
>
> <td><input type="text" name="dur" size="2" maxlength="2"></
> input></td>
>
> <td><input type="text" name="dist" size="4" maxlength="4"></
> input></td>
>
> <td><input type="text" name="perc" size="3" maxlength="3"></
> input></td>
> </tr>
> </tbody>
> </table>
> </form>
> </div><!-- //form -->
> </div><!-- //content -->
> ...
> [/html]
>
> [js]
> $(document).ready(function() {
> // When last input-text is click/selected, add new row
> $("table#ws tr:last input").focus(function() {
> $("table#ws").append( $("table#ws tr:last").clone() );
> return false;
> });
> });
> [/js]
>
>
> Anybody any idea how to fix this? I have tried multiple ways,
> but no luck..
>
> Kind regards,
>
> Robin
>
