javascript - 单击事件在触发一次 Backbone js 后停止工作

Question

我有许多点击事件链接到我网站上的不同位置以及我网站外的页面。

似乎我第一次点击一个时，它最初有效，但在那之后我所有的点击事件都完全停止触发。

不确定发生了什么，我应该发布什么代码？

我正在使用路由器在网站上呈现多个 View 。

我还应该提到我的控制台没有显示任何错误。

这里是调用脚本的地方。点击事件的 ID 已被编辑，但我已经检查过并且都是正确的(点击在第一次运行时有效，所以无论如何它们都是正确的)。

编辑重要说明:在导航发生之前，点击事件似乎很好

<!--templates-->
<!--Home -->
<script type="template/jquery" id="home_template">
    <%= partial "templates/home_template" %>
</script>
<!--Portfolio -->
<script type="template/jquery" id="portfolio_template">
    <%= partial "templates/portfolio_template" %>
</script>
<!--About-->
<script type="template/jquery" id="about_template">
    <%= partial "templates/about_template" %>
</script>



<!--Javascripts-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/backfire/0.3.0/backbone-firebase.min.js"></script>
<script src="javascripts/modernizr.js"></script>
<!--Application-->
<script src="javascripts/models.js"></script>
<script src="javascripts/views.js"></script>
<script src="javascripts/routes.js"></script>
<!--script src="javascripts/application.js"></script-->

<script>
    $(document).ready(function () {

        //home links
        $("#recent_work").click(function() {
           router.navigate("portfolio", true)
        });            

        //portfolio links
        $("#xx").click(function() {
            window.open('http://chexxxxxs.com.au/');
        });

        $("#xx").click(function() {
            window.open('http://updaxxxxxal.com.au/');
        });

        $("#xx").click(function() {
            window.open('http://whxxxxnry.com.au/');
        });

        $("#xx").click(function() {
            window.open('http://frexxxxxe.com.au/');
        });

        $("#xx").click(function() {
            window.open('http://puxxxxxel.com/');
        });

        $("#xx").click(function() {
            window.open('http://xxxxxxing.com.au/');
        });

    });
</script>

路线文件:

 var Router = Backbone.Router.extend({
routes: {
  '': 'home',
  'home' : 'home',
  'portfolio' : 'portfolio',
  'about' : 'about'
}
});

var homeView = new HomeView({ el: $("#container") });
var portfolioView = new PortfolioView({ el: $("#container") });
var aboutView = new AboutView({ el: $("#container") });

var router = new Router();

router.on('route:home', function () {
    homeView.render();
});

router.on('route:portfolio', function () {
    portfolioView.render();
});

router.on('route:about', function () {
    aboutView.render();
});

Backbone.history.start();

观看次数:

var HomeView = Backbone.View.extend({
    initialize : function () {
        this.render();
    },
    render : function () {
        var template = _.template( $("#home_template").html(), {} );
        this.$el.html(template);
    }
});

var PortfolioView = Backbone.View.extend({
    initialize : function () {
        this.render();
    },
    render : function () {
        var template = _.template( $("#portfolio_template").html(), {} );
        this.$el.html(template);
    }
});

var AboutView = Backbone.View.extend({
    initialize : function () {
        this.render();
    },
    render : function () {
        var template = _.template( $("#about_template").html(), {} );
        this.$el.html(template);
    }
});

Answer 1

感谢@undefined 帮助提出这个答案。

当我的 View 被渲染时，容器被 .html() 清空，这导致了事件的解除绑定(bind)。在主干中， View 中的事件必须在 View 本身的“事件”哈希中定义，当您这样做时，主干会自动重新委托(delegate)事件。

var PortfolioView = Backbone.View.extend({
    initialize : function () {
        this.render();
    },
    render : function () {
        var template = _.template( $("#portfolio_template").html(), {} );
        this.$el.html(template);
    },
    events: {
        "click .portfolio_item" : "linktoLive"
    },
    linktoLive: function (e) {
        var link = $(e.currentTarget).attr("data-link");
        window.open(link);
    }
});

在事件散列下，以这种格式添加事件事件绑定(bind):事件执行的函数，然后在后面添加函数。