CODEWITHSUNDEEP
jqueryajax
alan
alan

Reputation:

jQuery can't select AJAX elements

I'm trying to select elements of the page that have been added after the page has loaded. See the before and after example below. Before is the page source, and after is the generated source. For some reason I can't select anything that has been generated.

This seems odd to me as I'm pretty sure I've done this before.

Thanks for your help.

Before:

<div class="foo"></div>

After:

<div class="foo">
  <div class="bar"></div>
</div>

Upvotes: 4

Views: 8800

Answers (6)

Wayne
Wayne

Reputation: 1290

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()); });

Upvotes: 3

Nosredna
Nosredna

Reputation: 86206

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.

http://docs.jquery.com/Events/live

Upvotes: 6

Mohamed Ali
Mohamed Ali

Reputation: 561

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.

Upvotes: 2

Alan
Alan

Reputation: 574

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');

});

});

Upvotes: 0

Wayne
Wayne

Reputation: 1290

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!

Upvotes: 0

rp.
rp.

Reputation: 17683

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.

Upvotes: -1

Related Questions