的index.php
$(document).ready(function(){
$('a.bruker').click(function() {
var idx = $(this).attr('id');
$.ajax({
url:'bruker.php',
type:'POST',
data: 'id='+idx,
cache: false,
success:function(data) {
$('#bruker').html(data);
}
});
});
});
echo "<div id='bruker'></div>";
<a class='bruker' id='1'>name1</a>
<a class='bruker' id='2'>name2</a>
bruker.php
if(isset($_POST['id'])) {
echo "<script> $(function() {
$('.bruker-box').dialog({
autoOpen:true,
resizable: false,
closeOnEscape: true,
width:600,
height:500,
show: 'fade',
modal: true,
open: function(event, ui) { },
position: { my: 'center', at: 'center' }
})
$('#ui-id-2').css('border', 'none');
$('.ui-widget-overlay').click (function () {
$('.bruker-box').dialog( 'close' );
});
});</script>";
echo "<div class='bruker-box' title='(".$_POST['id'].")'>";
echo "example";
echo "</div>";
当我单击第一个框(name1)并单击name2时,我想只获得名称2,但第一个框(name1)首先出现而不是name2。
我怎样才能做到这一点?当我点击一个新的时候有没有办法重置某些东西?
答案 0 :(得分:0)
这种情况正在发生,因为每次单击一个锚点时,您都会注入一个包含设置为autoOpen的对话框的新div。 (在Chrome中启用开发人员工具F12并观察会发生什么。)
autoOpen divs accumulate,重新显示自己对DOM的每次更改。
要解决此问题,您可以在显示后remove()
显示div。将您的bruker.php
文件更改为:
请注意在对话框定义中添加close:
函数:
<强> PHP:强>
if(isset($_POST['id'])) {
$out = "
<script>
$(function() {
$('.bruker-box').dialog({
autoOpen:true,
resizable: false,
closeOnEscape: true,
width:600,
height:500,
show: 'fade',
modal: true,
open: function(event, ui) { },
position: { my: 'center', at: 'center' },
close: function() {
$('div.ui-dialog').remove();
}
}); //END .dialog()
$('#ui-id-2').css('border', 'none');
$('.ui-widget-overlay').click (function () {
$('.bruker-box').dialog( 'close' );
});
}); //END document.ready
</script>";
$out .= "<div class='bruker-box' title='Name: (" .$_POST['id']. ")'>";
$out .= "example";
$out .= "</div>";
echo $out;
}