[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'>Ooh, rookie mistake… thanks again.<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:54 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'>PS – Your code to prevent caching
seems flawed. By using the CF getTickCount() function the tick count will be
hard code into your template. What you want to do, is use the JS Date() object
to get the current milliseconds.<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/