[jQuery] jQuery operations on ajax data
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns="http://www.w3.org/TR/REC-html40" xmlns:o =
"urn:schemas-microsoft-com:office:office" xmlns:w =
"urn:schemas-microsoft-com:office:word" xmlns:st1 =
"urn:schemas-microsoft-com:office:smarttags"><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.5730.11" name=GENERATOR><o:SmartTagType name="City"
namespaceuri="urn:schemas-microsoft-com:office:smarttags"></o:SmartTagType><o:SmartTagType
name="place"
namespaceuri="urn:schemas-microsoft-com:office:smarttags"></o:SmartTagType><!--[if !mso]>
<STYLE>st1\:* {
BEHAVIOR: url(#default#ieooui)
}
</STYLE>
<![endif]-->
<STYLE>@font-face {
font-family: Consolas;
}
@page Section1 {size: 8.5in 11.0in; margin: 1.0in 1.25in 1.0in 1.25in; }
P.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman"
}
LI.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman"
}
DIV.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman"
}
A:link {
COLOR: blue; TEXT-DECORATION: underline
}
SPAN.MsoHyperlink {
COLOR: blue; TEXT-DECORATION: underline
}
A:visited {
COLOR: purple; TEXT-DECORATION: underline
}
SPAN.MsoHyperlinkFollowed {
COLOR: purple; TEXT-DECORATION: underline
}
SPAN.EmailStyle17 {
COLOR: windowtext; FONT-FAMILY: Arial; mso-style-type: personal-compose
}
DIV.Section1 {
page: Section1
}
</STYLE>
</HEAD>
<BODY lang=EN-US vLink=purple link=blue>
<DIV dir=ltr align=left><SPAN class=378141221-07022007><FONT face=Arial
color=#0000ff size=2>You just have to reassign the function to the images after
you load in content.</FONT></SPAN></DIV><BR>
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
<FONT face=Tahoma size=2><B>From:</B> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com] <B>On Behalf Of </B>Paul<BR><B>Sent:</B>
Wednesday, February 07, 2007 3:14 PM<BR><B>To:</B> 'jQuery
Discussion.'<BR><B>Subject:</B> [jQuery] jQuery operations on ajax
data<BR></FONT><BR></DIV>
<DIV></DIV>
<DIV class=Section1>
<P class=MsoNormal><FONT face=Arial size=2><SPAN
style="FONT-SIZE: 10pt; 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>
<P class=MsoNormal><FONT face=Arial size=2><SPAN
style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><o:p> </o:p></SPAN></FONT></P>
<P class=MsoNormal><FONT face=Consolas color=black size=1><SPAN
style="FONT-SIZE: 8pt; COLOR: black; FONT-FAMILY: Consolas">$(</SPAN></FONT><FONT
face=Consolas color=#006600 size=1><SPAN
style="FONT-SIZE: 8pt; COLOR: #006600; FONT-FAMILY: Consolas">"#keypad
img"</SPAN></FONT><FONT face=Consolas color=black size=1><SPAN
style="FONT-SIZE: 8pt; COLOR: black; FONT-FAMILY: Consolas">)</SPAN></FONT><FONT
face=Consolas color=blue size=1><SPAN
style="FONT-SIZE: 8pt; COLOR: blue; FONT-FAMILY: Consolas">.</SPAN></FONT><FONT
face=Consolas color=black size=1><SPAN
style="FONT-SIZE: 8pt; COLOR: black; FONT-FAMILY: Consolas">click(</SPAN></FONT><FONT
face=Consolas color=blue size=1><SPAN
style="FONT-SIZE: 8pt; COLOR: blue; FONT-FAMILY: Consolas">function</SPAN></FONT><FONT
face=Consolas color=black size=1><SPAN
style="FONT-SIZE: 8pt; COLOR: black; FONT-FAMILY: Consolas">() {
...</SPAN></FONT><FONT face=Arial size=2><SPAN
style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><o:p></o:p></SPAN></FONT></P>
<P class=MsoNormal><FONT face=Arial size=2><SPAN
style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><o:p> </o:p></SPAN></FONT></P>
<P class=MsoNormal><FONT face=Arial size=2><SPAN
style="FONT-SIZE: 10pt; 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>
<P class=MsoNormal><FONT face=Arial size=2><SPAN
style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><o:p> </o:p></SPAN></FONT></P>
<P class=MsoNormal><FONT face=Consolas color=black size=1><SPAN
style="FONT-SIZE: 8pt; COLOR: black; FONT-FAMILY: Consolas">$("#content").load("includes/sh4-welcome.cfm"</SPAN></FONT><FONT
face=Consolas color=#006600 size=1><SPAN
style="FONT-SIZE: 8pt; COLOR: #006600; FONT-FAMILY: Consolas">);<o:p></o:p></SPAN></FONT></P>
<P class=MsoNormal><FONT face=Arial size=2><SPAN
style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><o:p> </o:p></SPAN></FONT></P>
<P class=MsoNormal><FONT face=Arial size=2><SPAN
style="FONT-SIZE: 10pt; 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:City
w:st="on"><st1:place w:st="on">ajax</st1:place></st1:City> 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>
<P class=MsoNormal><FONT face=Arial size=2><SPAN
style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><o:p> </o:p></SPAN></FONT></P>
<P class=MsoNormal><FONT face=Arial size=2><SPAN
style="FONT-SIZE: 10pt; 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>
<P class=MsoNormal><FONT face=Arial size=2><SPAN
style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><o:p> </o:p></SPAN></FONT></P>
<P class=MsoNormal><FONT face=Arial size=2><SPAN
style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">-Paul<o:p></o:p></SPAN></FONT></P>
<P class=MsoNormal><FONT face=Arial size=2><SPAN
style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><o:p> </o:p></SPAN></FONT></P></DIV></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/