jQuery.Click метод перезагружает страницу

Question

Я пытаюсь создать плавающий div, который появляется при нажатии кнопки. Это не сложно, но когда я нажимаю кнопку, страница автоматически перезагружается. Я не знаю почему.

Я попытался использовать Poppost Bootstrap, но он не работает должным образом из-за этой же проблемы. Когда popover запускается, страница перезагружается, и 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

Это не может быть, он должен работать нормально. Должна быть какая-то другая проблема, пожалуйста, jsfill вашей полной страницы.

$(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"); 
    }); 

});