jQuery livesearch not working when loading asynchronously

Question

Hi

I have a livesearch and it uses an unordered list, like this:

<input id="search"/>
<ul id="list>
  <li>1</li>
  <li>2</li>
</ul>

Now I have the liveSearch function put on these items:

$('#search').liveUpdate('#list').focus();

At first I was testing with a static list, it worked like charm. Now I'm trying to load it asynchronous with the following statements:

//$('#list').load('/search/organization');
//$('#list').load('/search/person');
//$('#list').load('/search/debitor');
$('#list').load('/search/accountname');

The data is loaded as normal but now the search isn't working anymore. I'm not that used to using ajax so maybe this is a common problem?

Thanks in advance,

EDIT:

When I add this line of code, or alert it somewhere else it returns 1. There is always only one element in the ul.

$('#list').load('/search/organization');
var test = jQuery('#list');
alert(test.length);

Still no sollution found.

Answer 1

The plugin actually has a cache of the <li> elements that are being replaced, so you need to "unbind" the former handler and re-bind it again, like this:

$('#list').load('/search/accountname', function() {
  $('#search').unbind('keyup').liveUpdate('#list');
});

Since the plugin is rigged up to the .keyup() handler, you're just unbinding that and adding a new one. To really clean up, you could add a .parents('form').unbind('submit'), but if you had any other submit handlers on the <form>, that'd be a bad idea :)