Question

我正在尝试创建一个浮动div，它会在按钮被触发时显示出来。这并不难，但是当我按下按钮时，页面会自动重新加载。我不知道为什么。

我尝试使用Bootstrap的Popover，但由于同样的问题，它没有按预期工作。当弹出窗口被触发时，页面会重新加载，弹出窗口显然会消失。

我正在使用RoR，只是说如果找出问题会有用。

我在文档底部有类似的内容：

<a href="#" class="btn btn-small btn-warning" id="example">Show</a>

<script type="text/javascript">
    $(document).ready(function() {
        console.log("Page is loaded.");

        // Custom Popover
        $("#example").click(function() {
            console.log("Showing");
        });
    });
</script>

页面加载时会显示第一个console.log内部就绪功能。当我触发“显示”按钮时，console.log再次显示在浏览器的控制台中。这没有任何意义。

谢谢！

Answer 1

您需要使用preventDefault()：

停止链接的默认行为

$("#example").click(function(e) {
    e.preventDefault();
    console.log("Showing");
});

Answer 2

您遇到问题，而不是使用class

href

<a href="#" class="btn btn-small btn-warning" id="example">Show</a>

Answer 3

您有两个问题：

您要在href属性中设置课程，而不是class

<a href="#" class="btn btn-small btn-warning" id="example">Show</a>

您需要在调用链接时阻止浏览器关注href：

$("#example").click(function( e ) {
    e.preventDefault(); // don't follow href
    console.log("Showing");
});

Answer 4

你必须停止锚点来执行它的默认功能，加载指定其href的页面。这段代码可以解决问题：

$("#example").click(function(event) {
     event.preventDefault();
     console.log("Showing");
});

Answer 5

这不可能，它应该可以正常工作。必须有其他一些问题，请填写整页。

 $(document).ready(function() {

  console.log("Page is loaded.");

  // Custom Popover
  $("#example").click(function() {
      console.log("Showing");
  });

}）;

See here

Answer 6

在这里你可以找到一个完整的例子。 test here

$(document).ready(function()
{
   console.log("Page is loaded.");

   $("#example").click(function(e) 
   {
      e.preventDefault();
      alert("works");
   });

}）;

jQuery.Click方法重新加载页面

6 个答案: