В моем проекте у меня есть следующая страница, которая представляет собой панель инструментов со ссылками на все разделы моего приложения:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LigaDesportiva</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="clube.html">Clubes</a></li>
<li><a href="dirigente.html">Dirigentes</a></li>
<li><a href="jogadore.html">Jogadores</a></li>
<li><a href="liga.html">Ligas</a></li>
<li><a href="usuario.html">Usuários</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown">${usuario.nome} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="usuario_perfil.html">Perfil</a></li>
<li><a href="usuario_historico.html">Histórico</a></li>
<li><a href="logout.html">Sair</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div id="data"></div>
</div><!-- /.container -->
JS-звонки
<script src="/jquery-2.1.0.min.js"></script>
<script src="/bootstrap.min.js"></script>
<script src="/bootstrap-dialog.min.js"></script>
JS на END страницы
$('a').click(function(){
$.get($('a').attr('href'), function(destino){
alert('destino = '+destino);
});
BootstrapDialog.show({
title: 'Draggable Dialog',
message: 'destino = '+destino+' .Try to drag on dialog title to move your dialog.',
draggable: true
});
});
Код jquery в конце страницы должен записывать событие "click" и отображать предупреждение (которое используется только для теста) и BootstrapDialog, но это происходит с ботом. Что я делаю неправильно?
Код, который связывает обработчик с событием click, $('a').click(function(){
может быть вызван до того, как страница была проанализирована, и в этом случае селектор $('a')
не получит анкерные элементы.
Кроме того, в обработчике вы делаете $.get на всех ссылках в документе. Я предполагаю, что вы просто хотите, чтобы была нажата ссылка, которую вы можете получить с помощью $(this)
.
Наконец, вам нужно предотвратить поведение по умолчанию события click для элемента.
Попробуйте это, вместо этого:
<script>
// The ready event handler is called after the page is ready.
$().ready(function () {
$('a').click(function(e) {
e.preventDefault();
$.get($(this).attr('href'), function(destino) {
alert('destino = '+destino);
});
BootstrapDialog.show({
title: 'Draggable Dialog',
message: 'destino = '+destino+' .Try to drag on dialog title to move your dialog.',
draggable: true
});
});
});
</script>
измените JS-часть в нижней части страницы на следующее:
$('a').click(function(event){
event.preventDefault();
$.get($('a').attr('href'), function(destino){
alert('destino = '+destino);
BootstrapDialog.show({
title: 'Draggable Dialog',
message: 'destino = '+destino+' .Try to drag on dialog title to move your dialog.',
draggable: true
});
});
});
Если это тоже не работает, возможно, вам придется подождать, пока не будет готов DOM. Но не уверен в этом, потому что ваш JS-код находится внизу вашей страницы, поэтому HTML-код должен быть загружен при выполнении блока сценария.
Вам также необходимо event.preventDefault();
для отмены действия по умолчанию клика по ссылке.
write your code inside document.ready()
<script>
$(document).ready(function(){
$('a').click(function(){
$.get($('a').attr('href'), function(destino){
alert('destino = '+destino);
});
BootstrapDialog.show({
title: 'Draggable Dialog',
message: 'destino = '+destino+' .Try to drag on dialog title to move your dialog.',
draggable: true
});
});
});
</script>
$.get($(this)...
a
, выполните$.get($(this)...
вместо$.get($('a')...
. В противном случае объясните точно, что происходит (или ничего не происходит?) и сообщайте о любых ошибках, которые появляются в вашей консоли javascript.