Когда я использую ajax для динамического создания нового содержимого,.clone(), append() и т.д., новый элемент теряет любые триггеры и события, которые я запрограммировал = (
После создания копии, простые вещи, которые РАБОТАЮТ на других элементах, таких как добавление класса, на скопированные элементы больше не работают. Любое новое содержимое ajax не работает. Командные кнопки больше не работают. Что я могу сделать?
Я клонирую этот HTML, и кнопки команд больше не работают. Стилирование элементов span больше не работает с элементами CLONED:
<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" />
Status:
<select name="status" >
<option selected="selected" >Display</option>
<option >Hide</option>
</select>
<br/><br/>
<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" />
<br/>
<span class="required" id="venue_txt">*Venue: </span><input type="text" size="45" value="" name="venue" />
Telephone: <input type="text" value="" name="tel" />
<br/>
URL: <input type="text" size="100" value="" name="url" />
<br/><br/>
Address: <input type="text" size="45" value="" name="address" />
<span class="required" id="city_txt">*City: </span><input type="text" value="" name="city" />
<br/>
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/>
<br/>Comments: <br/>
<textarea cols="80" rows="8" name="comments" ></textarea>
</div>
<!-- START OF:commands -->
<div id="commands" >
<button name="edit" id="edit" >Edit</button>
<button name="delete" id="delete" >Delete</button>
<br />
<hr />
<br />
</div>
<!-- END OF:commands -->
</div>
<!-- END OF:new -->
Добавлены новые комментарии, 11/03/2011:
ОК, я выяснил проблему, и у меня была ошибка в моем jQuery. Теперь, когда я добавляю .clone(true) ALMOST, все работает.
Моя новая проблема - пользовательский идентификатор даты.
После клонирования HTML, когда я нажимаю на новое клонированное поле даты, основное внимание уделяется (старому) дате, с которого клонировали данные. Более того, если я выбираю дату, значение переходит к старому дате - не кволенному датированному дате.
Вот мой код ajax (после успешного представления):
UI датапикер код:
$("input[name='date']").datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, numberOfMonths: 3, showButtonPanel: true});
Ajax:
...ajax code...
function(data)
{
var $msg = eval(data);
if( $msg[0] == 1 )
{
//#var.new
$id = '#'+$msg[1];
$data = $("#new");
$new = $data.clone(true);
$new.find('input.datefield').datepicker();
$new.attr("id", $id);
$new.children('[name="id"]').val($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").text("Update");
$commands.children("#add").attr("pk", $id);
$commands.children("#add").attr("name", "update");
$commands.children("#add").attr("id", "update");
$commands.children("#reset").text("Delete");
$commands.children("#reset").attr("pk", $id);
$commands.children("#reset").attr("name", "delete");
$commands.children("#reset").attr("id", "delete");
$new.append( $commands );
//#animation
//blank.slideUp
$("#blank").slideUp(2500, function(){
$("#ADDNEW").html("► New:");
//$("#blank").clone().prependTo( $("#active") );
//$("#blank").prependTo( "#active" );
//active.slideUp
$("#active").slideUp("slow", function(){
$("#ON").html("► Active:");
$("#active").prepend( $new );
$('#reset').trigger('click');
//active.slideDown
$("#active").slideDown(8500, function(){
$("#ON").html("▼ Active:");
//blank.slideDown
$("#blank").slideDown(3500, function(){
$("#ADDNEW").html("▼ New:");
load_bar(0);
}); //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");
//$dad.children('[name="date"]').focus();
//END: blank
//$("#new").fadeIn(2000, function(){
//alert( $msg );
//}); //end: anumation.fadeIn
//}); //end: anumation.fadeOut
} //end: if
else
{
//var varMSG = data;
//alert( "Hello" );
alert( $msg );
//$("#add").attr("disabled", false);
//$("#reset").attr("disabled", false);
load_bar(0);
} //end: if.else
}//end: $.post.function
); //END:$.post
});
//END:ajax