[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: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"><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>
<STYLE>@font-face {
font-family: Tahoma;
}
@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
}
SPAN.EmailStyle18 {
COLOR: navy; FONT-FAMILY: Arial; mso-style-type: personal-reply
}
DIV.Section1 {
page: Section1
}
</STYLE>
</HEAD>
<BODY lang=EN-US vLink=purple link=blue>
<DIV dir=ltr align=left>First thing you need to do is to set that function on every
img. Then, when you load in new content, you have to reset the function. It
seems like you're doing the right thing though. Maybe someone else has comments
for you.</DIV> 
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
From: discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com] On Behalf Of Paul Sent:
Wednesday, February 07, 2007 3:30 PM To: 'jQuery
Discussion.' Subject: Re: [jQuery] jQuery operations on ajax
data </DIV>
<DIV></DIV>
<DIV class=Section1>
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>
<o:p> </o:p>
$(function()
{<o:p></o:p>

/* Load the
initial screen content */<o:p></o:p>

$("#content").load("includes/sh4-welcome.cfm?nocache=<cfoutput>#getTickCount()#</cfoutput>");<o:p></o:p>

/* Assign
the onclick event handler to all the images on the keypad. */<o:p></o:p>

$("#keypad
img").click(function()
{<o:p></o:p>

...<o:p></o:p>
<o:p> </o:p>
<DIV>
<DIV class=MsoNormal style="TEXT-ALIGN: center" align=center>
<HR tabIndex=-1 align=center width="100%" SIZE=3>
</DIV>
From:
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] On Behalf Of Andy Matthews Sent: Wednesday, February 07, 2007 2:12
PM To: 'jQuery
Discussion.' Subject: Re:
[jQuery] jQuery operations on <st1:City w:st="on"><st1:place
w:st="on">ajax</st1:place></st1:City> data<o:p></o:p></DIV>
<o:p> </o:p>
You just have to
reassign the function to the images after you load in
content.<o:p></o:p>
<o:p> </o:p>
<DIV class=MsoNormal style="TEXT-ALIGN: center" align=center>
<HR tabIndex=-1 align=center width="100%" SIZE=3>
</DIV>
From:
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] On Behalf Of Paul Sent: Wednesday, February 07, 2007 3:14
PM To: 'jQuery
Discussion.' Subject: [jQuery]
jQuery operations on <st1:City w:st="on"><st1:place
w:st="on">ajax</st1:place></st1:City> data<o:p></o:p>
I’m using jQuery to assign a
function to every image within a div on my page:<o:p></o:p>
<o:p> </o:p>
$("#keypad
img").click(function() {
...<o:p></o:p>
<o:p> </o:p>
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>
<o:p> </o:p>
$("#content").load("includes/sh4-welcome.cfm");<o:p></o:p>
<o:p> </o:p>
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>
<o:p> </o:p>
Is there a rule I don’t know about
using jQuery functions on ajax-loaded data?<o:p></o:p>
<o:p> </o:p>
-Paul<o:p></o:p>
<o:p> </o:p></DIV></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Topic Participants
lists

[jQuery] jQuery operations on ajax data

[jQuery] jQuery operations on ajax data

Topic Participants

lists