子divを含むmasterdivの内容をコピーしようとしています。以下はコードの実装です。
<label id="lblMessage" />
<table width="100%">
<tr>
<td>
<div id="colorSelector">
<div style="background-color: rgb(0, 0, 255);" />
</div>
</td>
</tr>
<tr>
<td>
<div id="dynPageContent"></div>
<input type="button" id="updContent" value="Update" />
</td>
</tr>
</table>
<script type="text/javascript" language="javascript">
$(document).ready(
function() {
$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function(colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function(colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function(hsb, hex, rgb) {
$('#dynPageContent div').css('backgroundColor', '#' + hex);
}
});
if ($("#dynPageContent").length) {
$("#dynPageContent").html('<%= Model.Page_Content.Trim() %>');
if ($("#pageContent").length) {
$("#pageContent").load("/Home/PageContent");
}
if ($("#Sidebar").length) {
$("#Sidebar").load("/Home/Sidebar");
}
}
$('#updContent').unbind('click');
$('#updContent').click(function(e) {
var updatedpageContent = $('<div />').append($('#dynPageContent div[id^="pageContent"],div[id^="sideba"]').clone()).remove().html();
$.getJSON("/Home/UpdatePage/?t=" + new Date(), { pc: updatedpageContent },
function(data) {
if (data != null) {
if (data == true) {
$('#lblMessage').html("Page template updated.");
}
}
});
});
});
</script>
データベースからhtml/div(コンテンツのプレースホルダー)を読み込んでいます。子divの背景色を変更し、jsonを使用して新しいスタイル(背景色)でプレースホルダー/子divをデータベースに更新できます。
上記のコードはFirefoxで正常に機能しますが、IEとchromeではmasterdiv(dynPageContent
)が表示されなくなります。
上記のコードの何が問題になっていますか?