[jQuery] jQuery operations on ajax data
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:st1="urn:schemas-microsoft-com:office:smarttags" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]--><o:SmartTagType
namespaceuri="urn:schemas-microsoft-com:office:smarttags" name="City"/>
<o:SmartTagType namespaceuri="urn:schemas-microsoft-com:office:smarttags"
name="place"/>
<o:SmartTagType namespaceuri="urn:schemas-microsoft-com:office:smarttags"
name="PersonName"/>
<!--[if !mso]>
<style>
st1\:*{behavior:url(#default#ieooui) }
</style>
<![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal;
font-family:Arial;
color:windowtext;}
span.EmailStyle18
{mso-style-type:personal;
font-family:Arial;
color:navy;}
span.EmailStyle19
{mso-style-type:personal;
font-family:Arial;
color:navy;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:Arial;
color:navy;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>Dan, <o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>Thank you. Using the callback to
reinit did the trick.<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>Oh and I have no idea what you meant about
only triggering off the handler for the #content layer… Will you
explain?<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>-Paul<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=3 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'>
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] <b><span
style='font-weight:bold'>On Behalf Of </span></b>Dan G. Switzer, II
<b><span style='font-weight:bold'>Sent:</span></b> Wednesday, February 07, 2007
2:53 PM
<b><span style='font-weight:bold'>To:</span></b> 'jQuery Discussion.'
<b><span style='font-weight:bold'>Subject:</span></b> Re: [jQuery] jQuery
operations on <st1:City w:st="on"><st1:place w:st="on">ajax</st1:place></st1:City>
data</span></font><o:p></o:p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>Paul,<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>The load() method is asynchronous.
You’ll need to use the callback to fire off a trigger to reinitialize
your img click handler. Also, I’d only trigger off the handler for the
#content layer.<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>-Dan<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<div style='border:none;border-left:solid blue 1.5pt;padding:0in 0in 0in 4.0pt'>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=2 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'>
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] <b><span
style='font-weight:bold'>On Behalf Of </span></b>Paul
<b><span style='font-weight:bold'>Sent:</span></b> Wednesday, February 07, 2007
4:30 PM
<b><span style='font-weight:bold'>To:</span></b> '<st1:PersonName w:st="on">jQuery
Discussion.</st1:PersonName>'
<b><span style='font-weight:bold'>Subject:</span></b> Re: [jQuery] jQuery
operations on <st1:place w:st="on"><st1:City w:st="on">ajax</st1:City></st1:place>
data</span></font><o:p></o:p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>I think I already am, Andy.
Here’s my first few lines; do I need to do something more?
(And thanks, btw.)<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<p class=MsoNormal style='text-indent:.5in;text-autospace:none'><font size=1
color=black face=Consolas><span style='font-size:8.0pt;font-family:Consolas;
color:black'>$(</span></font><font size=1 color=blue face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:blue'>function</span></font><font
size=1 color=black face=Consolas><span style='font-size:8.0pt;font-family:Consolas;
color:black'>() {</span></font><font size=1 face=Consolas><span
style='font-size:8.0pt;font-family:Consolas'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=1 color=black
face=Consolas><span style='font-size:8.0pt;font-family:Consolas;color:black'>
</span></font><font size=1 color="#609960" face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:#609960'>/* Load the initial
screen content */</span></font><font size=1 face=Consolas><span
style='font-size:8.0pt;font-family:Consolas'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=1 color=black
face=Consolas><span style='font-size:8.0pt;font-family:Consolas;color:black'>
$(</span></font><font size=1 color="#006600" face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:#006600'>"#content"</span></font><font
size=1 color=black face=Consolas><span style='font-size:8.0pt;font-family:Consolas;
color:black'>)</span></font><font size=1 color=blue face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:blue'>.</span></font><font
size=1 color=black face=Consolas><span style='font-size:8.0pt;font-family:Consolas;
color:black'>load("includes/sh4-welcome.cfm?nocache=</span></font><font
size=1 color=maroon face=Consolas><span style='font-size:8.0pt;font-family:
Consolas;color:maroon'><cfoutput></span></font><font size=1 color=black
face=Consolas><span style='font-size:8.0pt;font-family:Consolas;color:black'>#getTickCount()#</span></font><font
size=1 color=maroon face=Consolas><span style='font-size:8.0pt;font-family:
Consolas;color:maroon'></cfoutput></span></font><font size=1
color="#006600" face=Consolas><span style='font-size:8.0pt;font-family:Consolas;
color:#006600'>");<o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=1 color=black
face=Consolas><span style='font-size:8.0pt;font-family:Consolas;color:black'>
</span></font><font size=1 color="#609960" face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:#609960'>/* Assign the
onclick event handler to all the images on the keypad. */</span></font><font
size=1 face=Consolas><span style='font-size:8.0pt;font-family:Consolas'><o:p></o:p></span></font>
<p class=MsoNormal><font size=1 color=black face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:black'>
$(</span></font><font size=1 color="#006600" face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:#006600'>"#keypad
img"</span></font><font size=1 color=black face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:black'>)</span></font><font
size=1 color=blue face=Consolas><span style='font-size:8.0pt;font-family:Consolas;
color:blue'>.</span></font><font size=1 color=black face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:black'>click(</span></font><font
size=1 color=blue face=Consolas><span style='font-size:8.0pt;font-family:Consolas;
color:blue'>function</span></font><font size=1 color=black face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:black'>() {<o:p></o:p></span></font>
<p class=MsoNormal><font size=1 color=black face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:black'>
...</span></font><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=3 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'>
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] <b><span
style='font-weight:bold'>On Behalf Of </span></b>Andy Matthews
<b><span style='font-weight:bold'>Sent:</span></b> Wednesday, February 07, 2007
2:12 PM
<b><span style='font-weight:bold'>To:</span></b> '<st1:PersonName w:st="on">jQuery
Discussion.</st1:PersonName>'
<b><span style='font-weight:bold'>Subject:</span></b> Re: [jQuery] jQuery
operations on <st1:place w:st="on"><st1:City w:st="on">ajax</st1:City></st1:place>
data</span></font><o:p></o:p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=blue face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:blue'>You just have to reassign the function to
the images after you load in content.</span></font><o:p></o:p>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=3 width="100%" align=center tabIndex=-1>
</span></font></div>
<p class=MsoNormal style='margin-bottom:12.0pt'><b><font size=2 face=Tahoma><span
style='font-size:10.0pt;font-family:Tahoma;font-weight:bold'>From:</span></font></b><font
size=2 face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'>
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] <b><span
style='font-weight:bold'>On Behalf Of </span></b>Paul
<b><span style='font-weight:bold'>Sent:</span></b> Wednesday, February 07, 2007
3:14 PM
<b><span style='font-weight:bold'>To:</span></b> '<st1:PersonName w:st="on">jQuery
Discussion.</st1:PersonName>'
<b><span style='font-weight:bold'>Subject:</span></b> [jQuery] jQuery
operations on <st1:place w:st="on"><st1:City w:st="on">ajax</st1:City></st1:place>
data</span></font><o:p></o:p>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>I’m using jQuery to assign a function to every image
within a div on my page:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=1 color=black face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:black'>$(</span></font><font
size=1 color="#006600" face=Consolas><span style='font-size:8.0pt;font-family:
Consolas;color:#006600'>"#keypad img"</span></font><font size=1
color=black face=Consolas><span style='font-size:8.0pt;font-family:Consolas;
color:black'>)</span></font><font size=1 color=blue face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:blue'>.</span></font><font
size=1 color=black face=Consolas><span style='font-size:8.0pt;font-family:Consolas;
color:black'>click(</span></font><font size=1 color=blue face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:blue'>function</span></font><font
size=1 color=black face=Consolas><span style='font-size:8.0pt;font-family:Consolas;
color:black'>() { ...</span></font><font size=2 face=Arial><span
style='font-size:10.0pt;font-family:Arial'><o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>It worked great, until I set about organizing the screens in
my single-page application. I want to load the content dynamically as a
user moves about the application, so I’m trying to initialize the first
screen like so:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=1 color=black face=Consolas><span
style='font-size:8.0pt;font-family:Consolas;color:black'>$("#content").load("includes/sh4-welcome.cfm"</span></font><font
size=1 color="#006600" face=Consolas><span style='font-size:8.0pt;font-family:
Consolas;color:#006600'>);<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>This renders the html properly, but it breaks the jQuery
click function I was assigning to the images. (The #keypad div is within the
file being loaded at runtime.) There aren’t any JS errors, but
nothing happens when I click. If I remove the <st1:place w:st="on"><st1:City
w:st="on">ajax</st1:City></st1:place> call, and instead put the data back
inline the good old-fashioned way, the click functions work again.<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>Is there a rule I don’t know about using jQuery
functions on ajax-loaded data?<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>-Paul<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
</div>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/