How to filter the DIVs called by AJAX with jQuery?

advertisements

I use a simple jQuery code to filter DIVs with given class. It is based on the method given here, and working demo is here

$(document).ready(function(){
    var links = $('.bound');
    var divs = $('div');
    links.click(function(event){
       divs.hide();
       divs.filter('.' + event.target.id).show();
    });
});

This works when the DIVs are originally in the html code; but I call DIVs from an external file via simple jQuery ajax.

$.ajax({
  type: 'POST',
  url: 'external.html',
  success: function(html){
  $("#results").append(html);
  }
});

How to mix these two simple jQuery codes to work together to filter DIVs provided by ajax?


here's an example: http://jsfiddle.net/manuel/nYrUN/

Also have a look at the jquery live documentation. This will give you the abilty to bind events to selectors that aren't even present within the DOM (like objects you attach after an ajax call)

$('.bound').live('click', function(event) {
    event.preventDefault();
    $('div').hide().filter('.' + event.target.id).show();
});