[jQuery] Unable to bind click function in a dynamically created object?

2006-10-18 Thread Pascal 
hey gang--

i got a bit of a stumper for ya, trying to bind a function to the  
click event of each link in a dynamically generated list.

i have a bunch of long content pages that we're breaking up into  
subpages, with a sidenav to navigate through them. the markup for  
each page is as follows:

div class=page
h3Page One Title/h3
p/p
p/p
/div

div class=page
h3Another Page Title/h3
p/p
p/p
/div


here's the function that sets up the list of links and stuffs them  
into the sidenav.

$('.page').each(function(i) {
var title = $('h3',this).eq(0).text();
var link = $('lia href=#page'+(i+1)+''+title+'/a/li');
$('.sidenav ul').append(link);
$('a',link).click(function() {
alert(1);
// $('.page',pages).hide();
// $(page).show();
});
});
$('.page').hide().eq(0).show();


it grabs the text of the first H3 in each section to use as the link  
text. it builds an LI element containing the link, then appends that  
to the sidenav. then it tries to assign a click handler to the link.

i've commented out the functional part of the click function and just  
put in an alert for testing, but the function isn't firing when i  
click these links. am i missing something?

thanks for any help,

-p


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Unable to bind click function in a dynamically created object?

2006-10-18 Thread Klaus Hartl 


Pascal schrieb:
 hey gang--
 
 i got a bit of a stumper for ya, trying to bind a function to the  
 click event of each link in a dynamically generated list.
 
 i have a bunch of long content pages that we're breaking up into  
 subpages, with a sidenav to navigate through them. the markup for  
 each page is as follows:
 
 div class=page
 h3Page One Title/h3
 p/p
 p/p
 /div
 
 div class=page
 h3Another Page Title/h3
 p/p
 p/p
 /div
 
 
 here's the function that sets up the list of links and stuffs them  
 into the sidenav.
 
 $('.page').each(function(i) {
   var title = $('h3',this).eq(0).text();
   var link = $('lia href=#page'+(i+1)+''+title+'/a/li');
   $('.sidenav ul').append(link);
   $('a',link).click(function() {
   alert(1);
   // $('.page',pages).hide();
   // $(page).show();
   });
 });
 $('.page').hide().eq(0).show();
 
 
 it grabs the text of the first H3 in each section to use as the link  
 text. it builds an LI element containing the link, then appends that  
 to the sidenav. then it tries to assign a click handler to the link.
 
 i've commented out the functional part of the click function and just  
 put in an alert for testing, but the function isn't firing when i  
 click these links. am i missing something?
 
 thanks for any help,
 
 -p


I see one thing that may cause the problem: your variable link is a 
jQuery object. This is passed as context a few lines later on, but you 
have to pass a DOM node as context to the $ function.

Try this:
$('a', link[0]).click(...);


Or to overall shorten the code:

var link = $('li ... /li').appendTo('.sidenav ul')[0];
$('a', link).click(...);


Does that help?

-- Klaus


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Unable to bind click function in a dynamically created object?

2006-10-18 Thread Klaus Hartl 


Mike Alsup schrieb:
 I see one thing that may cause the problem: your variable link is a
 jQuery object. This is passed as context a few lines later on, but you
 have to pass a DOM node as context to the $ function.
 
 
 The context arg can be a jQuery object.  From the source:
 
 jQuery = function(a,c) {
 
 snip
 
   // Watch for when a jQuery object is passed at the context
   if ( c  c.jquery )
   return jQuery( c ).find(a);
 

Wow, thanks Mike! That must be quite new? Didn't work for me a while back...

-- Klaus

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Unable to bind click function in a dynamically created object?

2006-10-18 Thread John Resig 
Hi Pascal -

I did a little bit of re-tooling and got it working:
http://john.jquery.com/jquery/test/page.html

Let me know if it helps.

--John

 $('.page').each(function(i) {
 var title = $('h3',this).eq(0).text();
 var link = $('lia href=#page'+(i+1)+''+title+'/a/li');
 $('.sidenav ul').append(link);
 $('a',link).click(function() {
 alert(1);
 // $('.page',pages).hide();
 // $(page).show();
 });
 });
 $('.page').hide().eq(0).show();


 it grabs the text of the first H3 in each section to use as the link
 text. it builds an LI element containing the link, then appends that
 to the sidenav. then it tries to assign a click handler to the link.

 i've commented out the functional part of the click function and just
 put in an alert for testing, but the function isn't firing when i
 click these links. am i missing something?

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Unable to bind click function in a dynamically created object?

2006-10-18 Thread Mike Alsup 
 I see one thing that may cause the problem: your variable link is a
 jQuery object. This is passed as context a few lines later on, but you
 have to pass a DOM node as context to the $ function.


The context arg can be a jQuery object.  From the source:

jQuery = function(a,c) {

snip

// Watch for when a jQuery object is passed at the context
if ( c  c.jquery )
return jQuery( c ).find(a);

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Unable to bind click function in a dynamically created object?

2006-10-18 Thread Pascal 
ah, i'm sorry, i found the problem, in another function that is  
running on document.ready. (it's converting the sidenav into a  
rounded box by grabbing the html and recreating the div, so the click  
handlers are getting lost. it's an old function that i'll have to  
rewrite in a more JQ way.)

-p

On Oct 18, 2006, at 2:33pm, Klaus Hartl wrote:



 Pascal schrieb:
 hey gang--

 i got a bit of a stumper for ya, trying to bind a function to the
 click event of each link in a dynamically generated list.

 i have a bunch of long content pages that we're breaking up into
 subpages, with a sidenav to navigate through them. the markup for
 each page is as follows:

 div class=page
 h3Page One Title/h3
 p/p
 p/p
 /div

 div class=page
 h3Another Page Title/h3
 p/p
 p/p
 /div


 here's the function that sets up the list of links and stuffs them
 into the sidenav.

 $('.page').each(function(i) {
  var title = $('h3',this).eq(0).text();
  var link = $('lia href=#page'+(i+1)+''+title+'/a/li');
  $('.sidenav ul').append(link);
  $('a',link).click(function() {
  alert(1);
  // $('.page',pages).hide();
  // $(page).show();
  });
 });
 $('.page').hide().eq(0).show();


 it grabs the text of the first H3 in each section to use as the link
 text. it builds an LI element containing the link, then appends that
 to the sidenav. then it tries to assign a click handler to the link.

 i've commented out the functional part of the click function and just
 put in an alert for testing, but the function isn't firing when i
 click these links. am i missing something?

 thanks for any help,

 -p


 I see one thing that may cause the problem: your variable link is a
 jQuery object. This is passed as context a few lines later on, but you
 have to pass a DOM node as context to the $ function.

 Try this:
 $('a', link[0]).click(...);


 Or to overall shorten the code:

 var link = $('li ... /li').appendTo('.sidenav ul')[0];
 $('a', link).click(...);


 Does that help?

 -- Klaus


 ___
 jQuery mailing list
 discuss@jquery.com
 http://jquery.com/discuss/




___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/