JQuery and links - weird situation
<a href="http://anotherlink.com">link2</a>
And the JQuery code:
$('#inner a').click(function(){
console.log( 'achtung' );
});
But when I click on link1 the click handler does not call.
And in another situation:
$('a').click(function(){
console.log( 'achtung' );
});
And when I click on link2 , the handler calls, but link1 still doesn't work.
Could you explain to me why?
Here's some more code:
<div id="text-wrapper">
<div id="text">
<div id="content_close">close</div>
<div id="inner">
<!--Here will be content--> <br />
</div>
...
</div>
And the content is loaded by ajax into the inner block.
My problem was that I am loading content with links dynamically, so when running jquery code the page may not contain my link. So I have to use the live function:
$('#inner a').live( 'click', function(){ alert('achtung'); } );
Thank you, problem solved.
Is your jQuery code wrapped inside $(document).ready(function(){ ... })
?
If you don't expect the DOM to be ready, it is possible that jQuery cannot find #inner
.
$(document).ready(function(){
$('#inner a').click(function(){
console.log( 'achtung' );
});
});
When i change
console.log( 'achtung' );
to
alert( 'achtung' );
It works for me as expected.
Perhaps your console is uncomfortable, or what you are using to view it is not working correctly?
<!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>
Just guess, try putting "return"; or "debugger"; as the last line of your function. I'm wondering if the link will hit so that the console is cleared.
Is your ID inner
unique on the page?
You can try to query it in Firebug with document.getElementById("inner")
and see if the DOM node returned is what you expect (hover over the result in Firebug, il will display the DOM node on your page).
There are two ways to accomplish this. Need to load HTML or just NODE. To accomplish this, you must check if your page is loaded or JavaScript is running after a full DOM refresh.
if you list your javascript in yours <head>
like this:
<script type="text/javascript">
$('#inner a').click(function(){
console.log( 'achtung' );
});
</script>
It will execute when reading. The rest of the HTML is not loaded into the DOM, so the "# ainner a" element was not found by JavaScript. There are several ways to check if a page is loaded.
// 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' );
});
});
Another way is to put inline JavaScript after the domnode
<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>