Hello, im trying to select elements of the page that have been added after the page has loaded. See the before and after example, before is the page source, after is the generated source. For some reason i cant select anything that has been generated?
This seems odd to me as im pretty sure ive done this before.
Thanks for your help.
Before:
<div class="foo"></div>
After:
<div class="foo">
<div class="bar"></div>
</div>
You need to double-check all of your code. jQuery can access all parts of the DOM, whether they are statically or dynamically present.
We need to see the JavaScript to help you troubleshoot further.
It's quite unlikely. I'd like to see the source myself?
Otherwise try using Firebug in Firefox/Iceweasel. Firebug is a godsend -- use the "Console" tab -- for ajax-intensive sites where "View Source" is an imperfect solution. You can do things like:
$(".foo .bar")
and the console will output the number of matched elements!
ok heres the code, if i remove the div.off in the selector at the bottom i get the test alert as that element is not generated source.
$(document).ready(function(){
$(".search_container input").keyup(function(){
var search;
search = $(".search_container input").val();
if (search.length > 2){
$.ajax({
type: "GET",
url: "http://localhost:8080/search.xml",
data: "zoom_query=" + search + "&zoom_xml=1",
dataType: "xml",
success: function(xml){
$("#auto_suggest").empty();
$("#auto_suggest").show();
var _title = "";
var _link = "";
$("item", xml).each(function(){
_title = $("title", this).text();
_link = $("link", this).text();
_context = $("zoom\\:context", this).text();
if ($(this).length > 0){
message = "<div class=\"off\">";
message += "<div title='" + _context + "'>" + _title + "</div>";
message += "<small>" + _link + "</small>";
message += "</div>";
$("#auto_suggest").append(message);
}
else {
$("#auto_suggest").hide();
}
});
}
});
}
else {
$("#auto_suggest").hide();
};
});
$("#auto_suggest div.off").hover(function(){
alert('test');
});
});
When you append a div to #auto_suggest, you need to bind the event as well:
$("#auto_suggest").append("<div class='off'>Blah</div>");
$("#auto_suggest div.off").hover(function() { window.alert($(this).val()); });
Otherwise you use jQuery 1.3 onwards. The live() function will cater to your need; e.g.
$("#auto_suggest div.off").live("hover", function() { window.alert($(this).val()); });
you are binding the event before the dom element is created, that doesn't work as far as I know. Instead, you can add the binding after appending. There could be other solutions though.
All these comments about binding after append are helpful.
But if you switch to jQuery 1.3, you can use "live" instead of "bind" when you first set up the page, then you'll get your event even on added elements.