Question

我有一个php页面，其中包含jQuery生成的数据网格，例如dataGrid.php

在主页上有

和2个div这样的事情

dataGrid.php

<script> 
 generate the grid
</script>
<body>
<lightbox><div> close me </div>
<div >  holding the dataGrid </div>
</lightbox>
</body>

注意：我的意思是一个弹出框，当我说这不是我正在使用的真正有效的HTML标签时

这是主页

<body>
<div> click here to see the grid  </div>

<div> <?php include dataGrid.php ?></div>
</body>

我在dataGrid.php上有一个关闭按钮。我正在使用jQuery remove（）关闭include但是remove（）刷新了我不想要的主页。我也不确定id remove（）命令是否真的是跨浏览器？

我的问题：有没有办法或方法关闭dataGrid.php和灯箱而不刷新主页？

我已经检查过堆叠溢出上发布的其他3个问题，问题标题相同但在问题正文中有所不同。

Answer 1

如果您的关闭按钮是交互式的（即超链接），您需要在事件上调用preventDefault()以防止浏览器将其视为交互式。

在开始之前，值得重申我在对此问题的评论中所说的内容：<lightbox>不是有效的HTML元素，并且验证测试失败。但是，对于这个答案，我将使用它，因为这是给出了你提供的代码。

假设你的代码是这样的：

<lightbox>
    <a href="#" class="close">Close Me</a>
    ...
</lightbox>

您可以通过传递事件并调用event.preventDefault()来阻止超链接运行：

$('lightbox').on('click', 'a.close', function(event) {
    event.preventDefault();
    $('lightbox').remove();
});

或者，您只需将关闭按钮更改为不互动的内容，例如span：

<lightbox>
    <span class="close">Close Me</span>
    ...
</lightbox>

$('lightbox').on('click', 'span.close', function() {
    $('lightbox').remove();
});

Answer 2

对于那些拥有 onclick 的人，并且不知道该事件是否在该函数内可以访问：

<button class="remove-form" onclick="remove_form(this);">Remove this form</button>

function remove_form(button){
    jQuery(button).parent().remove();
    event.preventDefault();
}

如何在没有页面刷新的情况下使用jQuery remove（）？

2 个答案: