jQuery-UI 脚本在 wordpress 中的 .load() 之后停止工作答案

【问题标题】：jQuery-UI scripts stop working after .load() in wordpressjQuery-UI 脚本在 wordpress 中的 .load() 之后停止工作
【发布时间】：2016-11-30 11:48:09
【问题描述】：

我目前正在制作一个动态调查表，该表会询问客户他想要什么样的产品，然后展示我们电子商店中的相关产品。有点像按参数搜索，但更个性化。

现在我尝试通过从单独的 .php 文件中加载表单的每一页来做到这一点，这些文件旨在替换我页面上的某些 div，以避免重新加载整个页面。

我正在使用，或者更确切地说我正在尝试使用 jQuery UI 小部件，但是当我使用 .load('url') 函数加载下一页时它们停止工作。控制台输出错误，在小部件初始化时声明 $(...).slider is not a function(…)

我的个人页面看起来像这样

<style>
    #some styling relevant for the widgets
</style>
<script>


jQuery( function() {
    $('#back-button').click(function(){
          $('#formular-content').load('/eshop/formular/1.php') //this is how I load the pages
    });
    $('#next-button').click(function(){
          $('#formular-content').load('/eshop/formular/3.php') 
    });
//also these buttons work, so the whole <script> area seems... usable ?

//code copypasted from http://jqueryui.com/slider/#range
    $( "#slider-range" ).slider({
          range: true,
          min: 0,
          max: 500,
          values: [ 75, 300 ],
          slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
          }
    });

    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
          " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });
</script>
    <p>
      <label for="amount">Price range:</label>
      <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
    </p>

    <div id="slider-range"></div>
    <a id="back-button" class="ui-button ui-widget ui-corner-all" href="#">back</a>
    <a id="next-button" class="ui-button ui-widget ui-corner-all" href="#">back</a>

整个内容都在我加载内容的页面中的<div> 内。

正如我在标题中所说，我在 wordpress 中执行此操作，因此我将 jquery 和 jquery-ui 正确排入队列，它实际上在第一页上工作，这对于测试目的是相同的。它也是在管理面板中创建的常规 wordpress 页面，我在 functions.js 文件中有按钮和滑块功能，这些功能也在主题功能文件中正确排队。

所以我的问题是，如何在.load() 之后使脚本工作。我已经阅读了一些关于 $.getScript() 的内容并考虑加载 jQuery UI 文件，但我不完全确定如何使其与 WP 一起使用，如果它不是多余的，则一遍又一遍地加载相同的文件。我对这些互联网编程语言相当陌生……尤其是在将它们与 WP 集成时。

此外，如果有人对我如何以不同、更好/更简单的方式完成整个表格有其他想法，我愿意接受任何想法。

感谢您的回答

【问题讨论】：

标签： jquery wordpress jquery-ui

【解决方案1】：

$(...).slider is not a function(…) 错误明确指出您在加载对jquery-ui.js 文件的引用之前编写了此代码。所以无论你有什么脚本加载，在写你的plugin初始化之前把它放好。

对于通过.load 在动态加载的页面上无法运行的事件，可能的原因是：

您的动态加载页面的元素可能没有附加事件，如.slider，因为它是在插件初始化后加载的。

因此，您需要在 .load 之后添加一个 callback function，以便您可以重新初始化新加载的元素。

回调函数

$('#back-button').click(function(){
     $('#formular-content').load('/eshop/formular/1.php',function(){
          $( "#slider-range" ).slider({
               range: true,
               min: 0,
               max: 500,
               values: [ 75, 300 ],
              slide: function( event, ui ) {
                 $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
              }
          });
          //initialise anything here as in .slider() to the `element` which is loaded through ajax.
     });
});

【讨论】：

感谢您的回答。我没有使用任何插件，我使用 enqueued functions.js 来初始化那些在第一页上工作的小部件，然后我加载下一页，它们不再工作了。我试过你的代码，但它仍然是一样的。当第二个页面加载时，控制台输出 $(...).slider is not a function(...)
你能显示你正在加载的脚本的顺序或者你可以显示完整代码的地方吗？
在主题的 function.php 中我排队 functions.js, jquery, jquery-ui-core, and all jquery-ui-___ widgets，然后在 functions.js 中我调用 $( "#slider-range" ).slider() 和 $('#back-button').click() (jQuery(document).ready(
js 文件的顺序很重要。你有什么订单？
但正如我所说，在登录页面上，滑块没有问题。我也试过手风琴。在第二页上，整个页面都是文字，没有手风琴+$(...).accordion is not a function(…)

【解决方案2】：

以为这与 Wordpress 相关，但事实并非如此。

The solution

TL;DR

在 <script> 部分加载的 .php 文档中添加 jQuery UI 小部件初始化，如下所示

<script>
jQuery(document).ready(function($) {   
   $('.accordion').accordion({
      heightStyle: "content",
      active: false,
      collapsible: true
   });

})
</script>

我没有使用jQuery(document).ready 事件并且有问题。

感谢 Guruprasad Rao 抽出时间使用 TeamViewer :)

【讨论】：