[jQuery] Re: Selector don't work when adding html to page
This is a common problem with ajax requests. What's happening is the
selector only applies to elements that exist on the page at the time the
selector was called.
Once your ajax request has updated the page with more elements, they won't
have click events because they didn't exist when the selector was going
through the dom. So you'll have to assign the click events again after the
ajax request, but only to the new elements.
So your success callback needs to look more like this:
success: function(data) {
$(#text).html(data);
$(#text).find([EMAIL PROTECTED]'http']).attr('target','_blank');
},
-Hector
On Thu, Nov 20, 2008 at 9:08 AM, jetm [EMAIL PROTECTED] wrote:
Hi people:
The Selector work fine in the page however when a load data from HTML
archive the Selector don't apply for this.
TIA,
JETM
The Code:
In tag head:
$(document).ready(function() {
// Change attr to _blank for open in new Windows
$([EMAIL PROTECTED]'http']).attr('target','_blank');
$(#action).click(function() {
$.ajax({
url: update.html,
success: function(data) {
$(#text).html(data);
},
error: function(rhx, err, e) {
$(#text).html(rhx.responseText);
}
}); //END .ajax
}); //END click
}); //END Ready
In tag body:
a href=http://www.google.com;CLICK HERE!!!/a
p id=actionLoad Data/p
p id=text/p
In update.html:
a href=http://www.yahoo.com; Open in New Windows/a
[jQuery] Re: Selector don't work when adding html to page
Oops, i meant they won't have target='_blank'
:)
-Hector
On Thu, Nov 20, 2008 at 9:18 AM, Hector Virgen [EMAIL PROTECTED] wrote:
This is a common problem with ajax requests. What's happening is the
selector only applies to elements that exist on the page at the time the
selector was called.
Once your ajax request has updated the page with more elements, they won't
have click events because they didn't exist when the selector was going
through the dom. So you'll have to assign the click events again after the
ajax request, but only to the new elements.
So your success callback needs to look more like this:
success: function(data) {
$(#text).html(data);
$(#text).find([EMAIL PROTECTED]'http']).attr('target','_blank');
},
-Hector
On Thu, Nov 20, 2008 at 9:08 AM, jetm [EMAIL PROTECTED] wrote:
Hi people:
The Selector work fine in the page however when a load data from HTML
archive the Selector don't apply for this.
TIA,
JETM
The Code:
In tag head:
$(document).ready(function() {
// Change attr to _blank for open in new Windows
$([EMAIL PROTECTED]'http']).attr('target','_blank');
$(#action).click(function() {
$.ajax({
url: update.html,
success: function(data) {
$(#text).html(data);
},
error: function(rhx, err, e) {
$(#text).html(rhx.responseText);
}
}); //END .ajax
}); //END click
}); //END Ready
In tag body:
a href=http://www.google.com;CLICK HERE!!!/a
p id=actionLoad Data/p
p id=text/p
In update.html:
a href=http://www.yahoo.com; Open in New Windows/a
[jQuery] Re: Selector don't work when adding html to page
Thanks, work very well. I'm understand is part the ajax philosophy,
Hector, there is another solutions for this common problem in ajax
requests?
tia,
jetm
On Nov 20, 11:19 am, Hector Virgen [EMAIL PROTECTED] wrote:
Oops, i meant they won't have target='_blank'
:)
-Hector
On Thu, Nov 20, 2008 at 9:18 AM, Hector Virgen [EMAIL PROTECTED] wrote:
This is a common problem with ajax requests. What's happening is the
selector only applies to elements that exist on the page at the time the
selector was called.
Once your ajax request has updated the page with more elements, they won't
have click events because they didn't exist when the selector was going
through the dom. So you'll have to assign the click events again after the
ajax request, but only to the new elements.
So your success callback needs to look more like this:
success: function(data) {
$(#text).html(data);
$(#text).find([EMAIL PROTECTED]'http']).attr('target','_blank');
},
-Hector
On Thu, Nov 20, 2008 at 9:08 AM, jetm [EMAIL PROTECTED] wrote:
Hi people:
The Selector work fine in the page however when a load data from HTML
archive the Selector don't apply for this.
TIA,
JETM
The Code:
In tag head:
$(document).ready(function() {
// Change attr to _blank for open in new Windows
$([EMAIL PROTECTED]'http']).attr('target','_blank');
$(#action).click(function() {
$.ajax({
url: update.html,
success: function(data) {
$(#text).html(data);
},
error: function(rhx, err, e) {
$(#text).html(rhx.responseText);
}
}); //END .ajax
}); //END click
}); //END Ready
In tag body:
a href=http://www.google.com;CLICK HERE!!!/a
p id=actionLoad Data/p
p id=text/p
In update.html:
a href=http://www.yahoo.com; Open in New Windows/a
[jQuery] Re: Selector don't work when adding html to page
You can handle that issue with event delegation, try the Livequery
plugin: http://brandonaaron.net/docs/livequery/
- ricardo
On Nov 20, 3:42 pm, jetm [EMAIL PROTECTED] wrote:
Thanks, work very well. I'm understand is part the ajax philosophy,
Hector, there is another solutions for this common problem in ajax
requests?
tia,
jetm
On Nov 20, 11:19 am, Hector Virgen [EMAIL PROTECTED] wrote:
Oops, i meant they won't have target='_blank'
:)
-Hector
On Thu, Nov 20, 2008 at 9:18 AM, Hector Virgen [EMAIL PROTECTED] wrote:
This is a common problem with ajax requests. What's happening is the
selector only applies to elements that exist on the page at the time the
selector was called.
Once your ajax request has updated the page with more elements, they won't
have click events because they didn't exist when the selector was going
through the dom. So you'll have to assign the click events again after the
ajax request, but only to the new elements.
So your success callback needs to look more like this:
success: function(data) {
$(#text).html(data);
$(#text).find([EMAIL PROTECTED]'http']).attr('target','_blank');
},
-Hector
On Thu, Nov 20, 2008 at 9:08 AM, jetm [EMAIL PROTECTED] wrote:
Hi people:
The Selector work fine in the page however when a load data from HTML
archive the Selector don't apply for this.
TIA,
JETM
The Code:
In tag head:
$(document).ready(function() {
// Change attr to _blank for open in new Windows
$([EMAIL PROTECTED]'http']).attr('target','_blank');
$(#action).click(function() {
$.ajax({
url: update.html,
success: function(data) {
$(#text).html(data);
},
error: function(rhx, err, e) {
$(#text).html(rhx.responseText);
}
}); //END .ajax
}); //END click
}); //END Ready
In tag body:
a href=http://www.google.com;CLICK HERE!!!/a
p id=actionLoad Data/p
p id=text/p
In update.html:
a href=http://www.yahoo.com; Open in New Windows/a
