Using views_embed_view and jquery

Question

I'm calling a block in a template like so:

echo views_embed_view('sessions_by_track', 'block_1');

where the block is actually a view display. It's set to output html lists, and I want to do some jquery stuff to it, including hiding certain elements until something else is clicked on.

Here's what the list code looks like:

<ul data-role="listview">
  <li data-role="list-divider"><a href="/tracks/big-picture-0">Big Picture</a></li>

  <li class="views-row">  
    <div class="views-field-title">
      <span class="field-content"><a href="/sessions/tracks/partnering">Partnering for Success</a></span>
    </div>
  </li>

  <li class="views-row">  
    <div class="views-field-title">
      <span class="field-content"><a href="/sessions/tracks/the-shopper-economy">The Shopper Economy</a></span>
    </div>
  </li>
</ul> 

I have a scripts.js file that looks like this:

$(document).ready(function() {
  alert('test');
 $('li.views-row').hide();
});

The alert works; the hide doesn't. However, when I run that line in Firebug's console after the page has finished loading, the hide does work. So it seems that the view renders after the document.ready fires. I seem to recall reading something about this before, and there was a solution, but of course now that I need it I can't for the life of me find it. What do I need to do to get around this?

Edited to add: Drupal 6, Views2

Edited again to add: I've also tried this: in template.php added this function:

function mobile_jquery_preprocess_page(&$vars, $hook) {
  $vars['embedded_sessions'] = views_embed_view('sessions_by_track', 'block_1');
  $vars['scripts'] = drupal_get_js();
}

and then calling it in my page template like so:

print $embedded_sessions;

Same result.

Edited yet again to add that I've tried adding a new region to my template, assigning the block to that region, and then printing it with print $mobileContent; in the page template. Same result - the alert runs on load, but the hide does not. The hide runs just fine in Firebug's console, so I know the selector is OK.

Edited once more for @tim.plunkett

To a file called scripts.js, located in sites/all/themes/mobile_jquery/scripts, I added this (right now there's nothing else in the file):

(function ($) {
  console.log('behavior triggered');
  // Store our function as a property of Drupal.behaviors.
  Drupal.behaviors.myHomeHideLists = function (context) {
    // Find all the li items inside context that have our desired class
    $('li.views-row)', context)
      // hide them.
      .hide();
  };

}(jQuery));

In template.php, I added this (based on this answer):

function mobile_jquery_preprocess_page(&$vars, $hook) {
  $vars['embedded_sessions'] = views_embed_view('sessions_by_track', 'block_1');
  drupal_add_js(drupal_get_path('theme', 'mobile_jquery').'/scripts/script.js', 'theme');
  $vars['scripts'] = drupal_get_js();
}

The console.log does get triggered and printed, but the list items that match the selector do not get hidden.

Answer 1

Drupal provides a specific way to add JS to a page, to ensure that it is run whenever content is loaded into the DOM. This way, it will run after the document is loaded, but also after AJAX operations.

They're called Drupal behaviors.