Question

在我的资产文件夹中的autocomplete.js文件中，我有：

  function initialize_autocomplete() {


    $("#mainPage").bind("pageshow", function(e) {
      console.log("test");

      var data = ['C', 'Clojure', 'Jenny!', 'Java', 'Scala', 'Objective-C', 'C++', 'PHP', 'C#', '(Visual) Basic', 'Python', 'Perl', 'JavaScript', 'Ruby', 'Visual Basic .NET', 'Transact-SQL', 'Lisp', 'Pascal', 'Bash', 'PL/SQL', 'Delphi/Object Pascal', 'Ada', 'MATLAB'];

      $("#searchField").autocomplete({
        target: $('#suggestions'),
        source: data,
        link: 'target.html?term=',
        minLength: 1,
        matchFromStart: false
      });
    });
    }

在我的application.js中我有：

//= require autocomplete

在我的html.erb文件中，我有：

<div data-role="page" id="mainPage">

    <div data-role="content">

      <p>
        In this example autoComplete uses a local array comprised of strings. This also shows an example of the matchFromStart property set to false.
      </p>


      <p>
        <input type="text" id="searchField" placeholder="Categories">
        <ul id="suggestions" data-role="listview" data-inset="true"></ul>
      </p>

    </div>

  </div>

  <script>
  $(function() {
  // this function can be found in autocomplete.js
  initialize_autocomplete();
  });
</script>

内容在我的浏览器中加载 - 我可以看到输入框等，但是javascript没有执行。你会看到我有

console.log("test");

但是＆＃39;测试＆＃39; Chrome中没有出现在控制台中。当我将代码作为独立项目运行而不将其放入我的rails项目时，它按预期工作 - 显示下拉列表，我看到＆＃39; test＆＃39;在控制台中。欢迎任何帮助。

将我的代码更改为（正如Omar所建议的那样）：

<div data-role="page" id="mainPage">

    <h1>Welcome#auto_complete</h1>
<p>Find me in app/views/welcome/auto_complete.html.erb</p>

        <div data-role="content">

            <p>
                In this example autoComplete uses a local array comprised of strings. This also shows an example of the matchFromStart property set to false.
            </p>
            <p>
                <input type="text" id="searchField" placeholder="Categories">
                <ul id="suggestions" data-role="listview" data-inset="true"></ul>

            </p>
        </div>

                <script>
  // this function can be found in autocomplete.js
  initialize_autocomplete();
  console.log ("test");
</script>

    </div>

我的autocomplete.js：

  function initialize_autocomplete() {

$(document).on("pageshow", "mainPage", function {
      console.log("test");

      var data = ['C', 'Clojure', 'Jenny!', 'Java', 'Scala', 'Objective-C', 'C++', 'PHP', 'C#', '(Visual) Basic', 'Python', 'Perl', 'JavaScript', 'Ruby', 'Visual Basic .NET', 'Transact-SQL', 'Lisp', 'Pascal', 'Bash', 'PL/SQL', 'Delphi/Object Pascal', 'Ada', 'MATLAB'];

      $("#searchField").autocomplete({
        target: $('#suggestions'),
        source: data,
        link: 'target.html?term=',
        minLength: 1,
        matchFromStart: false
      });
    });
});

但我收到错误：

Uncaught ReferenceError: initialize_autocomplete is not defined

Answer 1

$（function（）{}）;绑定到“pageload”但是你试图将一个元素绑定到“pageshow”。我建议简化你的活动：

在autocomplete.js中：

- function initialize_autocomplete() { }); // delete
- $("#mainPage").bind("pageshow", function(e) { }); //delete

现在你可以做到：

$(function() {
    console.log("test");
    // Put the rest of your code
});

在Rails中，没有理由将HTML与js代码紧密结合。

js代码没有在我的rails应用程序中执行

1 个答案: