jQuery code is loading content in an unpredictable way I've got a view of teasers; each teaser has 3 clickable &lt;a&gt; elements:


"morelink" toggles an extra row in a table.
"noderef"  loads the referenced node into a div. 
"ajaxview" sends the node id as an argument to ajax load a view into a &lt;div&gt;. This view contains  a view of teasers which in turn each have 3 clickable &lt;a&gt; elements thus creating a nested view of teasers which in turn each have 3 clickable &lt;a&gt; elements. 


This is the JavaScript code.

Drupal.behaviors.morelink = function(context) {
  $("a.morelink").click(function (e) {
    e.preventDefault();
    $('.xtrarow').eq( $('a.morelink').index( $(this) ) ).toggle();
  });
}

Drupal.behaviors.ajaxview = function(context) {

    $("a.ajaxclick").click(function(){
    var nid = $(".mynid").eq($('a.ajaxclick').index( $(this) )).val();
    $('.container').eq($('a.ajaxclick').index( $(this) )).load(Drupal.settings.basePath + 'myajax/' + nid);
    return false;
});
}

Drupal.behaviors.noderef = function(context) {

    $("a.nrefclick").click(function(e){
      e.preventDefault();
    var nref = $(".mynref").eq($('a.nrefclick').index( $(this) )).val();
    $('.container').eq($('a.nrefclick').index( $(this) )).load('node/' + nref );
    return false;
});
}


This is the HTML code.

&lt;input type="hidden" class="mynref" value=&lt;?php print $node-&gt;field_noderef[0]['nid']; ?&gt; /&gt;
&lt;a class="nrefclick" href = "&lt;?php print url('node/' . $node-&gt;field_noderef[0]['nid']); ?&gt;"&gt;
&lt;img src="http://mysite/smallpinkarrowback.png" ALT="Back"&gt;&lt;/a&gt;

&lt;a class="morelink" href = "&lt;?php print url('node/' . $node-&gt;nid); ?&gt;"&gt;
&lt;img src="http://mysite/smallyellowarrowdowninfo.png" ALT="Forward"&gt;&lt;/a&gt;

&lt;a class="ajaxclick" href="&lt;?php print url('myajax/' . $node-&gt;nid); ?&gt;"&gt;
&lt;img src="http://mysite/smallpinkarrowforward.png" ALT="Forward"&gt;&lt;/a&gt;


The behavior is erratic: The "morelink" works consistently and is fine; the ajaxview works intermittently, and seems to load ok for the first few clicks, but once you've clicked a few, the JavaScript stops working.

Can anyone spot the problem?
Here's what worked in the end;

Drupal.behaviors.ajaxview = function(context) {
  $('a.ajaxclick:not(.ajaxview-processed)', context)
  .addClass('ajaxview-processed').each(function() {
    $(this).click(function(e){
        e.preventDefault();
      $index = $('a.ajaxclick').index($(this));
      var nid = $(".mynid").eq($index).val();
      var toLoad = Drupal.settings.basePath + 'myajax/' + nid;
        xhr = $.ajax({
        url: toLoad,
        success: function(data) {
          $('#content').html($('.audioforumtable', data));
          Drupal.attachBehaviors(context);
        }
      });
    });
  });

 $('a.nrefclick:not(.ajaxview-processed)', context)
  .addClass('ajaxview-processed').each(function() {
    $(this).click(function(e){
        e.preventDefault();
      $index = $('a.nrefclick').index($(this));
      var nref = $(".mynref").eq($index).val();
      var toLoad = Drupal.settings.basePath + 'node/' + nref;
        xhr = $.ajax({
        url: toLoad,
        success: function(data) {
          $('#content').html($('.audioforumtable', data));
          Drupal.attachBehaviors(context);
        }
      });
    });
 });
}


I changed the container to content because it worked better for what I need but the problem seems likely to have been the lack of the Drupal.attachBehaviors(context) . Thanks to Baysaa for steering me in the right direction!  I will vote your answer up when I have enough reputation points.