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-ui正确排队，它实际上在第一页上工作，这对于测试目的是相同的。它也是在管理面板中创建的常规wordpress页面，我在functions.js文件中有按钮和滑块功能，这些功能也在主题函数文件中正确排队。

所以我的问题是，如何让脚本在.load()之后运行。我已经阅读了有关$.getScript()的内容，并考虑加载jQuery UI文件，但我不完全确定如何使其与WP一起使用，如果它不是多余的，则加载相同的文件再来一次。我对这些互联网编程语言还不熟悉......尤其是将它们与WP集成。

如果有人有其他想法我可以用不同的，更好/更简单的方式做整个表格，我对任何想法持开放态度。

感谢您的回答

Answer 1

axios.get('endpoint/url')错误明确指出您在加载对$(...).slider is not a function(…)文件的引用之前已编写此代码。因此，无论您加载什么脚本，请在编写jquery-ui.js初始化之前将其放入。

对于通过以下plugin动态加载页面无效的事件，可能是原因：

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

因此，您需要在.slider之后设置callback function，以便可以重新初始化新加载的元素。

回调功能

.load

Answer 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上的时间：）

jQuery-UI脚本在wordpress中的.load（）之后停止工作

2 个答案: