JQuery и ссылки - странная ситуация - PullRequest
Новая
       25

JQuery и ссылки - странная ситуация

2 голосов
/ 12 октября 2009
некоторая текстовая ссылка1 
<a href="http://anotherlink.com">link2</a>

И код JQuery: 

$('#inner a').click(function(){
   console.log( 'achtung' );
});

Но когда я нажимаю на link1 , обработчик кликов не вызывает.

А в другой ситуации: 

$('a').click(function(){
   console.log( 'achtung' );
});

И когда я нажимаю на link2 , обработчик вызывает, но link1 все еще не работает.

Не могли бы вы объяснить мне: почему?

Вот еще код: 

 <div id="text-wrapper">
    <div id="text">
       <div id="content_close">close</div>
       <div id="inner">
       <!--Here will be content--> <br />               
    </div>
    ...
 </div>

И содержимое загружается ajax во внутренний блок.

Моя проблема заключалась в том, что я динамически загружаю контент со ссылками, поэтому при запуске кода jquery страница может не содержать мою ссылку. Поэтому я должен использовать live-функцию: 

$('#inner a').live( 'click', function(){ alert('achtung'); } );

Спасибо всем, проблема решена.

Ответы [ 5 ]

2 голосов
/ 12 октября 2009

Код JQuery заключен в $(document).ready(function(){ ... })?

Если вы не ожидаете готовности DOM, возможно, jQuery не сможет найти #inner. 

$(document).ready(function(){
    $('#inner a').click(function(){
        console.log( 'achtung' );
    });
});
1 голос
/ 12 октября 2009

Когда я меняю 

 console.log( 'achtung' );

до 

 alert( 'achtung' );

Это работает для меня, как ожидалось.

Возможно, ваша консоль работает шатко, или что вы используете для просмотра, она не работает должным образом? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
</head>
<body>
<div id="inner">some text <a href="#contacts">link1</a></div>
<p><a href="http://anotherlink.com">link2</a> <script type="text/javascript">
/*<![CDATA[*/
$('#inner a').click(function(){
   alert( 'achtung' );
});
/*]]>*/
</script></p>
</body>
</html>
0 голосов
/ 13 октября 2009

Есть 2 способа добиться этого. HTML или просто узел должен быть загружен. Для этого вам нужно проверить, загружена ли ваша страница, или выполнить JavaScript после полного обновления DOM.

если вы укажете свой javascript в <head> следующим образом: 

<script type="text/javascript">
  $('#inner a').click(function(){
    console.log( 'achtung' );
  });
</script>

Он будет выполняться при чтении. Остальная часть HTML не загружается в DOM, поэтому JavaScript не может найти элемент «#inner a». Есть несколько способов проверить, загружена ли ваша страница 

// simplest form, not the best (without jQuery)
window.onload = function () {
  // search for the node with jQuery
  $('#inner a').click(function(){
    alert( 'achtung' );
  });
}

// jQuery form, best
$(document).ready(function () {
  // search for the node with jQuery
  $('#inner a').click(function(){
    alert( 'achtung' );
  });
});

// smallest jQuery from, also best
$(function () {
  // search for the node with jQuery
  $('#inner a').click(function(){
    alert( 'achtung' );
  });
});

Другой способ - разместить встроенный JavaScript после доменного узла 

<div id="inner">
  <a href="/test.html">link1</a>
</div>
<a href="/test2.html">link2</a>`
<script type="text/javascript">
  /*<![CDATA[*/
  $('#inner a').click(function(){
    alert( 'achtung' );
  });
  /*]]>*/
</script>
0 голосов
/ 12 октября 2009

Ваш inner идентификатор уникален на странице?

Вы можете попробовать запросить его в Firebug, используя document.getElementById("inner") и посмотреть, является ли ожидаемый узел DOM ожидаемым (при наведении на Firebug результат il подсветит узел DOM на вашей странице).

0 голосов
/ 12 октября 2009

Просто догадка, попробуйте поставить «возврат»; или «отладчик»; как последняя строка вашей функции. Мне интересно, если нажатие на ссылку приводит к тому, что консоль будет очищена.

...