为什么我的 jQuery 脚本没有在 Wordpress 中触发？答案

【问题标题】：Why is my jQuery script not triggering in Wordpress?为什么我的 jQuery 脚本没有在 Wordpress 中触发？
【发布时间】：2010-10-26 00:46:38
【问题描述】：

我已在未使用任何 CMS 的演示页面上测试了以下脚本。该脚本位于 index.php 文件中，运行良好。

<form method="get" action="">
  <input id="label_search" type="text" value="" maxlength="40" name="inputText"/>
</form>

<script type="text/javascript">
  var options = {
      script:"includes/autosuggest.php?json=true&",
      varname:"input",
      minchars: 2,
      delay: 200,
      json:true,
      shownoresults:false,
      maxresults:15,
      timeout: 5000
  };

  var as_json = new bsn.AutoSuggest('inputText', options);
</script>

现在我想在 Wordpress 模板文件中使用相同的代码。但什么都没有发生。似乎脚本根本没有触发。

我正在使用用户友好的 URL，并将自定义永久链接设置为 /%category%/%postname%。或许有话要说？

我知道 bsn.AutoSuggest_2.1.3.js 正在运行，因为在页面加载时对文件执行“alert('hello')”测试。

可能出了什么问题？

这是我的 WP 代码：

sl_startpage.php：

<?php
/*
Template Name: SL - Start page
*/ 
  get_header(); ?>
  <div id="myArea">
  <?php
    include_once('includes/storeLocator/sl_header.php');
  ?>
  </div>

<?php 
  get_footer(); 
?>

这是 sl_header.php 中的（简化的）代码：

  <div id="sl-header">
    <form method="get" action="">
      <input id="label_search" type="text" value="" maxlength="40" name="product_search"/>
    </form>                   
  </div>


  <script type="text/javascript">
    var options = {
        script:"includes/autosuggest.php?json=true&",
        varname:"input",
        minchars: 2,
        delay: 200,
        json:true,
        shownoresults:false,
        maxresults:15,
        timeout: 5000
    };
    var as_json = new bsn.AutoSuggest('product_search', options);
  </script>

大家有什么建议吗？

这是我使用的插件： http://www.brandspankingnew.net/archive/2007/02/ajax_auto_suggest_v2.html

【问题讨论】：

标签： jquery wordpress autocomplete

【解决方案1】：

includes/autosuggest.php?json=true&

这是网址，对吧？我认为它最终会与您的模板生成的文件相关，因此如果 autosuggest.php 的 url 位于：

http://yourserver.com/includes/autosuggest.php

..您使用模板为以下两个（虚构的）网址生成 html：

http://yourserver.com/frontpage/
http://yourserver.com/categories/anotherpage/

我很确定它会在这里寻找您的包含：

http://yourserver.com/frontpage/includes/autosuggest.php
http://yourserver.com/categories/anotherpage/includes/autosuggest.php

..当您可能希望它查看时：

http://yourserver.com/includes/autosuggest.php

..所以尝试在该 JSON 中的 url 前面添加一个“/”，看看是否可以纠正它。

【讨论】：

哇，真快。我发现这是我自己的错误。我正在使用“another/dir/sl_header.php”一旦我设置了正确的路径，事情就会触发。现在我只有找不到 autosuggest.php 文件的问题。从 bsn.AutoSuggest('product_search', options) 可以看出，我使用了正确的文本框名称。 Firebug 只是给了我一个 404 Not Found。
我又试了一次，这可能是因为它解析为您生成的页面中的相对 url（参见上面的编辑）
我的网址是：localhost/mywebsite/store-locator。文件的“物理”路径是：localhost/mywebsite/includes/autosuggest.php。由于我在 Wordpress CMS 中使用用户友好的 URL，我认为您的上述任何建议都行不通。一个原因是，如果我创建显示“Hello world”的 test.php，并将其放在根目录中，我将无法通过localhost/mywebsite/test.php 访问它。 Wordpress 只会显示带有文本“Nothing found”的默认模板。

【解决方案2】：

好的！经过大约 20 小时的研究，我在 blog by Ryan Pharis 中找到了答案。正如我所怀疑的，这是一个简单的解决方案。

Wordpress 使用“用户友好的 URL”。因此我的路径最终是这样的： http://www.mysite.com/includes/autosuggest.php?json=true&

真正的路径是这样的： http://www.mysite.com/wp-content/themes/my_theme/includes/autosuggest.php?json=true&

我的脚本不能位于外部 .js 脚本中，因为我需要从 Wordpress 获取 URL。所以我这样做了：

<?php $site_url = bloginfo('template_url'); ?>

 <script type="text/javascript">
    var options = {
        script:"<?php echo $site_url; ?>includes/autosuggest.php?json=true&",

现在我的脚本可以运行了，我是一个快乐的露营者。

【讨论】：