jquery ui lost after jQuery load

I have a problem with jQuery being lost after .load() function. I have a element built up with jQuery UI. The problem i开发者_Go百科s that when I load it from separate page like this:

$("#mydiv").load("getgroup.php?group=" + selectedGroup).html();

The getgroup.php generates something like this, depending on the GET parameter:

<select>
 <option>something</option>
 <option>something</option>
</select>

When loading it with load() (or post, ajax, get) the element returns unformatted... I have tried including jquery and jquery-ui plugin also in the getgroup.php file but with no luck...

Thank you

---

The problem is, your jquery code isn't executed automatically on dynamically loaded elements.

What you should do is, put all your jquery ui code in a function. For instance, let's say you want to call the button() jQuery UI function on the newly loaded submit elements:

function launchUiWidgets(target) {
  $(target).find('input:submit').button();
}

Then, you use this function as a success callback when you load new elements - giving it target as an argument to avoid rerunning the code on all of your DOM. Let's suppose you're loading the data in a div of id "container":

$.get(
   "whatever.html?name=val",
   function(data){
       $('#container').html(data);
       launchUiWidgets('#container');
   },
   "html");

---

If my understanding is correct and the element is being inserted, but with no CSS, you may need to run .addClass after the element is loaded to apply your chosen CSS class once the element is present. However, if in your CSS you have default values for the element type predefined, e.g. select{color:#000000;width:... these should also be loaded automatically.

Per the comment below- if you are looking at your predefined handlers still being relevant for content injected by AJAX/load() calls, you can use the .live() method:

http://api.jquery.com/live/