JQuery and links - strange situation_问答_开发者

开发者 https://www.devze.com 2022-12-08 13:04 出处：网络

some text link1 <a href=\"http://anotherlink.com\">link2</a> And JQuery code: $(\'#inner a\').click(function(){

some text link1

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

And JQuery code:

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

But when I click at link1, click-handler doesn't call.

And in another situation:

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

And when I click at link2, handler calls, but link1 is still unworking.

Could you explain me: why?

Here is more code:

 <div id="text-wrapper">
    <div id="text">
       <div id="content_close">close</div>
       <div id="inner">
       <!--Here will be content--> <br />        开发者_JS百科       
    </div>
    ...
 </div>

And content is loaded by ajax into inner-block.

My problem was in that I'm loading content with links dynamically, so, when jquery code runs, the page could doesn't content my link. So I have to use live-function:

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

Thanks all, problem is solved.

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

When I change

 console.log( 'achtung' );

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

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

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>