这个问题有点奇怪,我很好奇是否有人知道发生了什么。您可以在此处获取 CSS、HTMl 和 JS ,但我在本地机器上看到的行为与小提琴中的行为不同。目的是用户将单击 div 内的 span 标签,然后会弹出一个模式(我还没有做到),用户将能够编辑和保存更改。您可以在更新函数中看到一个文本框附加到#hidden
元素。虽然我从未设置文本框的值,但当单击跨度标记时,文本框会附加到具有(几乎)视图状态隐藏 ASP.net 字段的整个值的元素。我将隐藏元素的 ID 更改为垃圾,认为可能隐藏是一个不好的 ID,但我仍然得到了相同的效果。有谁知道发生了什么?
编辑:“#hidden”元素与“#asdf”完整代码相同:
<script type="text/javascript">
$(document).ready(function () {
var personArray = [{
name: 'firstName',
gender: 'male',
age: 30
}, {
name: 'secondName',
gender: 'female',
age: 20
}];
//finds over object in the array and every property on that object
//and makes a control out of it and styles is.
function pretty(array) {
var divArray = [];
for (var i = 0; i < array.length; i++) {
var $div = $('<div>').addClass('person');
for (var prop in array[i]) {
var $span = $('<span>').text(prop + ': ' + array[i][prop]);
$div.append($span);
}
divArray.push($div);
}
return divArray;
}
$('body').append(pretty(personArray));
$('.person span').click(function () {
update($(this).parent());
});
function update(control) {
var $spans = $(control).children('span');
for (var i = 0; i < $spans.length; i++) {
$('#asdf').append($spans[i]).css('float', 'left');
var textBox = $('input').attr('type', 'textbox').css('float', 'right');
$('#asdf').append(textBox);
}
$('.updatePanel').fadeIn();
}
console.log('wEPDwUKLTIwNjAyODU4M2RkOhAAaDmHX8rBCXDQytiqIx94ch'.length);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="asdf" style="float:right" class="updatePanel"></div>
</div>
</form>
</body>