每当我使用ajax动态创建新内容时,.clone(),append()等,新元素会丢失我编程的任何触发器和事件=(
复制后,简单的事情在其他元素上起作用(比如添加一个类到),在复制的元素上不再起作用。任何新的ajax内容都不起作用。命令按钮不再起作用。我该怎么办?
我正在克隆这个HTML,命令按钮不再起作用。在克隆的元素上不再起作用的是样式化的span元素。
新的评论已添加,11/03/2011:
好的,我找到了问题所在,我的jQuery代码出错了。现在,当我添加.clone( true )时,几乎一切都正常工作。
我的新问题是UI日期选择器。 在克隆HTML后,当我点击新克隆的日期字段时,焦点会转移到克隆数据的(旧)日期字段上。而且,如果我选择一个日期,值会被发送到旧日期字段,而不是新克隆的日期字段。
Ajax:
复制后,简单的事情在其他元素上起作用(比如添加一个类到),在复制的元素上不再起作用。任何新的ajax内容都不起作用。命令按钮不再起作用。我该怎么办?
我正在克隆这个HTML,命令按钮不再起作用。在克隆的元素上不再起作用的是样式化的span元素。
<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 )时,几乎一切都正常工作。
我的新问题是UI日期选择器。 在克隆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