[jQuery] jQuery operations on ajax data
<html 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)">
<o:SmartTagType namespaceuri="urn:schemas-microsoft-com:office:smarttags"
name="City"/>
<o:SmartTagType namespaceuri="urn:schemas-microsoft-com:office:smarttags"
name="place"/>
<!--[if !mso]>
<style>
st1\:*{behavior:url(#default#ieooui) }
</style>
<![endif]-->
<style>
<!--
/* Font Definitions */
@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-compose;
font-family:Arial;
color:windowtext;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<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: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 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>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/