Safari 中未触发的主干事件

Question

为了学习练习，我将一个 sinatra/backbone 应用程序转换为 Rails 环境。我让它在 Chrome 和 Firefox 上运行，但它在 Safari 上不起作用。原来的应用程序http://backbone-hangman.heroku.com 也不能在 Safari 上运行。当您单击“新游戏”时，它似乎不会触发事件。 Safari 控制台没有显示任何错误（尽管我对 Safari 的开发人员工具并不熟悉，因为我从不使用它们）。

由于这里有应用程序的实时版本http://backbone-hangman.heroku.com 我不会发布很多代码，但这是设置点击事件的视图代码#new_game，触发 startNewGame 功能。 Safari 中什么也没有发生。原文的源代码在这里https://github.com/trivektor/Backbone-Hangman

我在 Google 上搜索了一下，发现有人提到 Safari 以不同的方式处理事件，但找不到解决方案。有什么可以推荐的吗？

$(function() {

  window.OptionsView = Backbone.View.extend({
    el: $("#options"),
    initialize: function() {
      this.model.bind("gameStartedEvent", this.removeGetAnswerButton, this);
      this.model.bind("guessCheckedEvent", this.showGetAnswerButton, this);
    },
    events: {
      'click #new_game': 'startNewGame',
      'click #show_answer': 'showAnswer'
    },
    startNewGame: function() {
      this.model.new();
    },
    removeGetAnswerButton: function() {
      $("#show_answer").remove();
    },
    showGetAnswerButton: function(response) {
      console.log("showGetAnswerButton");
      console.log(response);
      var threshold = this.model.get("threshold");
      console.log(threshold);
      if (response.incorrect_guesses == this.model.get("threshold")) {
        $(this.el).append('<input type="button" id="show_answer" class="action_button" value="Show answer" />');
      }
    },
    showAnswer: function() {
      this.model.get_answer();
    }
  })

})

更新

基于 OP 下面的 cmets 之一，我发布了更多代码。这是hangman.js，其中对象被实例化

var game = new Game

  var options_view = new OptionsView({model: game});

  var characters_view = new CharactersView({model: game});

  var hint_view = new HintView({model: game});

  var word_view = new WordView({model: game});

  var hangman_view = new HangmanView({model: game});

  var answer_view = new AnswerView({model: game});
  var stage_view = new StageView({model: game});

视图和模型像这样附加到窗口

window.AnswerView = Backbone.View.extend({ ...

更新 除了在站点范围内加载的 Backbone、jQuery 和 Underscore 之外，还为 Rails 系统中的这个特定应用程序加载了以下文件。

Answer 1

This is jQuery + Safari issue (document.ready)

您可以将脚本移动到 body 标记内，然后删除每个文件中的 $(function(){ /**/ }) 包装器。

我还添加了 requirejs 支持并制作了pull request

编辑：

首先对不起我的英语:)

---

文件视图/index.haml：

我们应该在页面底部嵌入js（避免Safari错误）

= javascript_include_tag "javascript/require.js", :"data-main" => "javascript/config"

这里javascript/config是requirejs配置的路径。

---

文件 public/javascript/config.js:

"deps" : ["hangman"]

这意味着应用程序将以hangman.js开头

---

文件 public/javascript/hangman.js:

我们不需要$(function() { 包装器，因为我们从正文和文档初始化的脚本已经“准备好”

define([
  'models/game',
  'views/answerView',
  /* ... */
],
function(Game, OptionsView, /* ... */) {
  // ...
}

在这里我们加载我们的模块（第一个数组元素将在第一个函数参数中可用，依此类推）

---

其他文件

我们只需将$(function() { 替换为define(['backbone'], function(Backbone) {

在第一行我们加载主干模块。当它被获取时，它将在匿名函数中可用（第一个参数 - Backbone）

接下来我们应该返回视图以避免undefined模块值（public/javascript/hangman.js文件应该初始化很多视图。它不能初始化undefined它应该初始化我们应该返回的Backbone.View）

---

要了解更多信息，您应该阅读 requirejs 文档。 我建议你从this article开始

Answer 2

试试这个。

var OptionsView = Backbone.View.extend({
    el: $("#options"),
    initialize: function() {
      this.model.bind("gameStartedEvent", this.removeGetAnswerButton, this);
      this.model.bind("guessCheckedEvent", this.showGetAnswerButton, this);
    },
    events: {
      'click #new_game': 'startNewGame',
      'click #show_answer': 'showAnswer'
    },
    startNewGame: function() {
      this.model.new();
    },
    removeGetAnswerButton: function() {
      $("#show_answer").remove();
    },
    showGetAnswerButton: function(response) {
      console.log("showGetAnswerButton");
      console.log(response);
      var threshold = this.model.get("threshold");
      console.log(threshold);
      if (response.incorrect_guesses == this.model.get("threshold")) {
        $(this.el).append('<input type="button" id="show_answer" class="action_button" value="Show answer" />');
      }
    },
    showAnswer: function() {
      this.model.get_answer();
    }
  });

您的代码不需要在文档中准备好（它不是直接操作 DOM，它只是声明一个对象）；

请确保 game.js 遵循您的所有声明。

Safari 在向全局对象添加变量时似乎存在问题。在全局上下文中使用 var 确保 window.OptionsView 存在。将来您可能会考虑使用 require.js 来管理所有这些全局对象问题。