ansaurus

Question

Answer 1

+1 A:

When I change

 console.log( 'achtung' );

to

 alert( 'achtung' );

It works for me as expected.

Perhaps your console is acting wonky, or whatever you're using to view it isn't working properly?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<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"&gt;
</script>
</head>
<body>
<div id="inner">some text <a href="#contacts">link1</a></div>
<p><a href="http://anotherlink.com"&gt;link2&lt;/a&gt; <script type="text/javascript">
/*<![CDATA[*/
$('#inner a').click(function(){
   alert( 'achtung' );
});
/*]]>*/
</script></p>
</body>
</html>

BryanH 2009-10-12 16:47:43

Nothing happens. I also tried to set breakpoint in FireBug. Still doesn't work.

Ockonal 2009-10-12 16:49:35

I added my full test code. I'm also running FF 3.5.3 on Unbuntu. What are you running?

BryanH 2009-10-12 16:53:53

You might also try your code using another browser and/or turn off all your extensions.

BryanH 2009-10-12 16:55:34

Answer 2

+2 A:

Is your jQuery code wrapped inside $(document).ready(function(){ ... }) ?

If you are not waiting for the DOM to be ready, it is possible that jQuery cannot find #inner.

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

Vincent Robert 2009-10-12 17:01:55

Yes, my code is running when DOM is ready.

Ockonal 2009-10-12 17:04:59

It is good practice to put all Javascript at the end of the page if possible. The reason for this is because browsers go into synchronous mode when they encounter JS. By placing the code at the end of the page, the content can display much faster, giving the user the impression that the page is loading much faster. Wrapping the code in a doc.ready function is not necessary unless one assumes the person will click the link as soon as they see it.

BryanH 2009-10-12 17:06:54

If your Javascript is at the end of your page, then waiting for the DOM to be ready cost you nothing except that you protect yourself against odd/strange/weird/bizarre browser bugs.

Vincent Robert 2009-10-12 17:09:15

I put my code into the end of the page, it does'nt help.

Ockonal 2009-10-12 17:13:47

Answer 3

A:

Just a hunch, try putting a "return;" or "debugger;" as the last line of your function. I'm wondering if hitting the link is causing the console to be cleared.

Lance Fisher 2009-10-12 17:04:40

Nothing happens. But when I click at links in inner, FireBug console is 'jump' up in a few seconds and then come back.

Ockonal 2009-10-12 17:09:58

Sounds like the jquery click event is not getting bound to the link. Try adding an id to the link and using it to select the anchor element, and see if that makes a difference.

Lance Fisher 2009-10-12 18:19:55

Answer 4

A:

Is your inner ID unique in the page?

You could try to query it in Firebug using document.getElementById("inner") and see if the return DOM node is the one you expect (hover the result in Firebug, il will hilight the DOM node in your page).

Vincent Robert 2009-10-12 17:11:47

Yes, It's unique.

Ockonal 2009-10-12 17:16:19

I'm out of options for the moment!

Vincent Robert 2009-10-12 17:16:42

Answer 5

A:

There are 2 ways to achieve this. The HTML or just the NODE has to be loaded. To accomplish this you have to check whether your page is loaded or execute the JavaScript after the DOM is fully updated.

if you specify your javascript in your <head> like this:

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

It will execute when it is read. The rest of the HTML isn't loaded in the DOM so the '#inner a' element cannot be found by JavaScript. There are several ways to check if you 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' );
  });
});

The other way is to place 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>

Robert Cabri 2009-10-13 07:40:44

ansaurus

tags:

views:

answers:

JQuery and links - strange situation

related questions