jQuery脚本在wordpress中.load()之后停止工作

Question

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

现在，我尝试从单个.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正确地排队，它实际上在第一页上工作，这对于测试来说是一样的。另外，它是在管理面板中创建的常规wordpress页面，我在functions.js文件中有按钮和滑块函数，这也是在主题函数文件中正确地排队的。

因此，我的问题是，如何使脚本在.load()之后工作。我读过一些关于$.getScript()的内容，并考虑过加载jQuery UI文件，但我不完全确定如何使它与WP一起工作，如果它不是多余的，则一次又一次地加载相同的文件。我对这些网络编程语言很陌生.尤其是把它们和WP结合起来。

另外，如果有人有其他想法，我可以用不同、更好/更简单的方式来完成整个形式，我对任何想法都是开放的。

谢谢你的回答

Answer 1

我以为这和Wordpress有关，结果却不是。

The solution

TL;DR

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

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

})
</script>

我没有使用jQuery(document).ready事件，这就是问题所在。

谢谢Guruprasad Rao在TeamViewer上的时间:)

Answer 2

$(...).slider is not a function(…)错误特别指出，在加载对jquery-ui.js文件的引用之前，您已经编写了此代码。因此，无论加载什么脚本，在编写plugin初始化之前都要把它放在上面。

如果事件无法通过下面的.load动态加载页面，可能的原因是：

• 动态加载的页面元素可能没有附加事件，就像在.slider中一样，因为它是在插件初始化后加载的。

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

回调函数

$('#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.
     });
});