ajax - jQuery(document).ready() 不适用于 AJAX 加载的 jQuery-UI 小部件

Question

我正在使用 jQuery.ajax() 方法加载一些代码。在此代码中，我想要一些 jQuery-UI 小部件( slider 和日历)，但它们不会出现在 IE 中。

这里有一些示例代码，您也许可以帮助我理解我哪里出错了。

将加载 jQuery-UI 小部件的代码

<script>
jQuery(document).ready(function(){
  jQuery.ajax({
    type:'post',
    url: 'file.php',
    success: function (data) {
     jQuery('.somediv').empty().html(data); 
    }
  });
});
</script>

加载的代码应该初始化 jQuery-UI 小部件

<script>
jQuery(document).ready(function(){
  jQuery('.datepicker-div').datepicker(someoptions);
  jQuery('.slider-div').slider(someoptions);
});
</script>
<div class="datepicker-div">
<div class="slider-div">

可以看到，应该很简单。对于 FF 可以正常工作，但对于 IE 则不行。

也许它与文档就绪声明无关？

Answer 1

只需在成功事件中调用初始化器即可:

<script>
jQuery(document).ready(function(){
  jQuery.ajax({
    type:'post',
    url: 'file.php',
    success: function (data) {
      jQuery('.somediv').empty().html(data); 
      jQuery('.datepicker-div').datepicker(someoptions);
      jQuery('.slider-div').slider(someoptions);
    }
  });
});
</script>

当然，您应该通过初始化函数来重构它:

function Initialize(){
  jQuery('.datepicker-div').datepicker(someoptions);
  jQuery('.slider-div').slider(someoptions);
}

然后让您的成功调用它，以及 ready() ebent:

<script>
jQuery(document).ready(function(){
  jQuery.ajax({
    type:'post',
    url: 'file.php',
    success: function (data) {
     jQuery('.somediv').empty().html(data); 
     Initialize();
    }
  });
});
</script>

更新

我已经更仔细地阅读了您的问题，现在我完全理解了。您的 ready() 位于加载的代码中。那么你应该使用 jQuery 的 load() :

Script Execution

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed. An example of both cases can be seen below:

Here, any JavaScript loaded into #a as a part of the document will successfully execute.

$('#a').load('article.html');