instant search: DOM behaviors not working on returned elements.

[Who8MyFish]

So I've only recently started using jQuery / ajax and so forgive me if this is in the wrong place but.. I'm having a tough time with an instant search I built into this project. It query's a database and then echoes a <table>with the results in. For the most part this search works beautifully BUT unfortunately the DOM behaviors that I set up are not working on the returned table rows.

 

My jQuery: http://pastebin.com/zrFMbPcL

search.php:  http://pastebin.com/9HS28ZyL

Search results are presented here:  http://pastebin.com/ePfRnxsR

 

tl;dr When I double click a <tr class='play'> in the main part of the app the DOM behavior works fine but when I double click <tr class='play'> that was generated with php/ajax nothing happens.

 

I've only tested this in Google Chrome and Firefox.

[kicken]

The way your setting up your event for the class='play' elements will only attach it to  elements that exist at that time.  It won't affect any elements that are added later dynamically.

 

What you need to do is either repeat that code after your search results come in or attach the event in such a way that it will pick up new elements (see .delegate or .live)

 

[Who8MyFish]

OK great! I suspected that was the problem... I've updated my code a little and I'm still having the problem.

http://pastebin.com/jPMSUMG7

 

[Who8MyFish]

I take that back, it works PERFECTLY.

Thank you sir!