links wont work after multiple jquery load

im loading files inside two divs at the same time: #ajax_id and #ajax_col, the problem is when i make another link from inside one of the loaded divs, other links wont work anymore... this is my code:

$(document).ready(function() {
   var api = $('#ajax_in').jScrollPane().data('jsp');
   $('.aj4x').bind('click', function() {
      var action = $(this).attr("rel");
      api.getContentPane().load("ajax.php?id=" + action,
      function() {
        api.reinitialise();
        return false;
      });

      $("#ajax_col").load("ajax.php?col=" + action,function() { return false; });
   });
});

and this is how im making the links:

$('.bt').click(function() {
   $("#ajax_in").load("ajax.php?id=form123", function() { return false; });
});

after i click on a .bt, the content is loaded in the #ajax_in but the rest of the links dont work anymore (only the ones that load #ajax_col)开发者_开发知识库

what im doing wrong? i can make it work when i change for live('click') but i read that the click function is already 'live'

Change .bind to .live if your .aj4x links stop working.

If you .bt links stop working then change the

$('.bt').click( to $('.bt').bind('click',

The point is that you bring in new links, and the event handling has not been assigned to them.

The use of .live() allows for this

Description: Attach a handler to the event for all elements which match the current selector, now and in the future.

In answer to your addition about click being live. No click events assigned with .click(..) or .bind('click',..) are not live. They get assigned when the .click or .bind method is called only to the elements that match the selector at that time. Newly created elements will not have the handler, and thus the need for the .live() method.