Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
rated 0 times [  173] [ 1]  / answers: 1 / hits: 29965  / 13 Years ago, thu, november 3, 2011, 12:00:00

Whenever I use ajax to dynamically create new content, .clone(), append() etc, the new element looses any triggers and events I programmed =(

After making copy, simple things that WORK on other elements like adding a class to , on the copied elements no longer work. Any new ajax content does not work. Command buttons no longer work. What can I do?

I am cloning this HTML, and the command buttons no longer work. Styling the span elements no longer work on the CLONED elements:

<div name=shows id=x><br/> <!-- The ID depends on the database-->
<div name=shows id=x>
ID: <input disabled=disabled size=7 value=x name=id />
<select name=status >
<option selected=selected >Display</option>
<option >Hide</option>
<span class=required id=date_txt>*Date: </span><input type=text value= name=date />
<span class=required id=title_txt>*Title: </span><input type=text size=65 value= name=title />
<span class=required id=venue_txt>*Venue: </span><input type=text size=45 value= name=venue />
Telephone: <input type=text value= name=tel />
URL: <input type=text size=100 value= name=url />
Address: <input type=text size=45 value= name=address />
<span class=required id=city_txt>*City: </span><input type=text value= name=city />
State: <input type=text value= name=state />
ZIP: <input type=text value= name=zip />
<span id=country_txt>*Country: </span><input type=text value=United States name=country />
<br/>Comments: <br/>
<textarea cols=80 rows=8 name=comments ></textarea>
<!-- START OF:commands -->
<div id=commands >
<button name=edit id=edit >Edit</button>
<button name=delete id=delete >Delete</button>
<br />
<hr />
<br />
<!-- END OF:commands -->
<!-- END OF:new -->

New comments added, 11/03/2011:

OK, I figured out the problem and I had an error on my jQuery. Now, when I add .clone( true ) ALMOST everything works.

My new problem is the UI datepicker.
After cloning the HTML, when I click on the newly cloned date field, the focus goes to the (old) datefield the data was cloned from. More over, if I select a date, the value goes to the old datefield -Not the newly cloned datefield.

Here is my ajax code (After a successful submition):

UI datepicker code:

$(input[name='date']).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, numberOfMonths: 3, showButtonPanel: true});


    ...ajax code...
var $msg = eval(data);
if( $msg[0] == 1 )
$id = '#'+$msg[1];
$data = $(#new);
$new = $data.clone(true);

$new.attr(id, $id);
$new.children('[name=id]').attr(value, $id);
$new.children(:input).each(function() { var $value = $(this).val(); $(this).attr(value, $value); });
$new.prepend( <br/> );

$commands = $(#blank).children(#commands).clone(true);
$commands.children(#add).attr(pk, $id);
$commands.children(#add).attr(name, update);
$commands.children(#add).attr(id, update);

$commands.children(#reset).attr(pk, $id);
$commands.children(#reset).attr(name, delete);
$commands.children(#reset).attr(id, delete);

$new.append( $commands );

$(#blank).slideUp(2500, function(){
$(#ADDNEW).html(&#9658; New:);
//$(#blank).clone().prependTo( $(#active) );
//$(#blank).prependTo( #active );

$(#active).slideUp(slow, function(){
$(#ON).html(&#9658; Active:);
$(#active).prepend( $new );

$(#active).slideDown(8500, function(){
$(#ON).html(&#9660; Active:);

$(#blank).slideDown(3500, function(){
$(#ADDNEW).html(&#9660; New:);

}); //end: anumation.#blank.slideDown
}); //end: anumation.#active.slideDown
}); //end: anumation.#blank.slideUp
}); //end: anumation.#active.slideUp

//$(#new).fadeOut(2000, function(){
//START: blank
//alert( $(#blank).html() );
//$dad = $(#new);
//$dad.children('input[name!=id][name!=country], textarea').val('');
//$dad.children('[name=country]').val(United States);
//END: blank
//$(#new).fadeIn(2000, function(){
//alert( $msg );
//}); //end: anumation.fadeIn
//}); //end: anumation.fadeOut
} //end: if
//var varMSG = data;
//alert( Hello );
alert( $msg );

//$(#add).attr(disabled, false);
//$(#reset).attr(disabled, false);
} //end: if.else
}//end: $.post.function
); //END:$.post

More From » jquery


.clone( true ) does the trick.


[#89322] Tuesday, November 1, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 472
Total Questions: 98
Total Answers: 96

Location: Macau
Member since Mon, Nov 16, 2020
4 Years ago