link2 And the JQuery code: $('#inner a')....">
Clever Geek Handbook

JQuery and links - weird situation

some text link1    
<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.

+2


source to share


5 answers


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


source


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>
+1


source


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.

0


source


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).

0


source


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>
0


source






More articles:


All Articles