jQuery 加载后 jquery ui 丢失

Question

我遇到了 .load() 函数后 jQuery 丢失的问题。 我有一个用 jQuery UI 构建的元素。问题是，当我从单独的页面加载它时，如下所示：

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

getgroup.php 生成类似这样的内容，具体取决于 GET 参数：

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

当使用 load() （或 post、ajax、get）加载它时，元素返回未格式化的..我尝试将 jquery 和 jquery-ui 插件也包含在 getgroup.php 文件中，但没有成功...

谢谢

Answer 1

问题是，您的 jquery 代码不会在动态加载的元素上自动执行。

你应该做的是将所有 jquery ui 代码放在一个函数中。例如，假设您要在新加载的提交元素上调用 button() jQuery UI 函数：

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

然后，在加载新元素时使用此函数作为成功回调 - 给它 target 作为参数以避免在所有 DOM 上重新运行代码。假设您正在 id“container”的 div 中加载数据：

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

Answer 2

如果我的理解是正确的并且正在插入元素，但没有 CSS，则可能需要运行 .addClass< /a> 加载元素后，一旦元素存在，就应用您选择的 CSS 类。但是，如果在 CSS 中预定义了元素类型的默认值，例如 select{color:#000000;width:... 这些也应该自动加载。

根据下面的评论 - 如果您正在查看预定义处理程序仍然与 AJAX/load() 调用注入的内容相关，您可以使用 .live() 方法：

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