Question

一些文字链接1

<a href="http://anotherlink.com">link2</a>

和JQuery代码：

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

但是当我点击 link1 时，click-handler不会调用。

在另一种情况下：

$('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-function：

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

谢谢大家，问题解决了。

Answer 1

你的jQuery代码是否包含在$(document).ready(function(){ ... })内？

如果您没有等待DOM准备就绪，jQuery可能找不到#inner。

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

Answer 2

当我改变

 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>

Answer 3

只是预感，试着“回归”;或“调试器;”作为你的功能的最后一行。我想知道是否按下链接导致控制台被清除。

Answer 4

您的inner ID在页面中是唯一的吗？

您可以尝试使用document.getElementById("inner")在Firebug中查询它，看看返回的DOM节点是否是您所期望的节点（将结果悬停在Firebug中，我将点亮页面中的DOM节点）。

Answer 5

有两种方法可以实现这一目标。必须加载HTML或只是NODE。要完成此任务，您必须在DOM完全更新后检查您的页面是否已加载或执行JavaScript。

如果您在<head>中指定了这样的javascript：

<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' );
  });
});

另一种方法是在domnode

之后放置内联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>

JQuery和链接 - 奇怪的情况

5 个答案: