Syam,

Thanks for that! works perfectly!

Regards,

Robin

2008/7/25 Syamsundar <[EMAIL PROTECTED]>:
>
>
> Robin,
>
> Once you clone with 'true', then just unbind the event from this row.
>
> Try this:
>
> $(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(true) );
>                $(this).parents('tr:eq(0)').find('input').unbind('focus');
>                return false;
>        });
> });
>
>
> Thanks,
> -Syam
>
>
> Robin Gruyters-3 wrote:
>>
>>
>> Syam,
>>
>> I've already found that out. Thanks anyway. Although it still doesn't
>> work. I mean it clones (including the events) but it doesn't remove
>> the event state from the above rows. When I click (or in this case
>> focus) on any other input-text-box within the same row, it clones
>> another row. (and another and another..)
>>
>> I was hoping that with the $("#ws tr:last") it will not, but aparently
>> it remembers it's state.
>>
>> Anyway, thanks for helping me. If you, or anybody else has an idea how
>> to fix this, let me know.
>>
>> Regards,
>>
>> Robin
>>
>> On Jul 23, 9:54 pm, Syamsundar <[EMAIL PROTECTED]> wrote:
>>> Hi Robin,
>>>
>>> Try calling cloning with 'true'. This will clone the element as well as
>>> the
>>> attached event handlers.
>>>
>>> Thanks,
>>> -Syam
>>>
>>>
>>>
>>> Robin Gruyters-3 wrote:
>>>
>>> > Michael,
>>>
>>> > Thanks for your answer, and I understand what direction you thinking
>>> > of. Although it doesn't work. (for me that is..)
>>> > Somehow it doesn't see the focus on the #ws. I have tried many
>>> > different ways, but no luck.
>>>
>>> > But does a table have a onfocus event anyway, as far as I know it
>>> > doesn't.
>>>
>>> > Kind regards,
>>>
>>> > Robin
>>>
>>> > On Jul 22, 5:13 pm, "Michael Geary" <[EMAIL PROTECTED]> wrote:
>>> >> 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: [email protected]
>>> >> > [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
>>>
>>> -----
>>> Learning web technologies... one at a time!
>>> :working:
>>> --
>>> View this message in
>>> context:http://www.nabble.com/for-input-cloning-tp18587942s27240p18618533.html
>>> Sent from the jQuery General Discussion mailing list archive at
>>> Nabble.com.
>>
>>
>
>
> -----
> Learning web technologies... one at a time!
> :working:
> --
> View this message in context: 
> http://www.nabble.com/for-input-cloning-tp18587942s27240p18645933.html
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.
>
>
> >
>

Reply via email to