Question

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

这似乎是我第一次点击它，它最初起作用，但在此之后我所有的点击事件都会完全停止。

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

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

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

以下是调用脚本的位置。点击事件的ID已被编辑，但我已经检查过并且都是正确的（点击首先进行工作，所以无论如何都是这样。）

编辑重要说明：点击事件似乎很好UNTIL导航

<!--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提供这个答案的帮助。

当我的视图被渲染时，容器被.html()清空，这导致了事件的解除绑定。在骨干中，视图中的事件必须在视图本身的“事件”哈希中定义，当您执行此主干时，会自动重新委派事件。

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);
    }
});

在事件哈希下，以此格式event binding : function to execute on event添加事件，然后添加函数。

点击事件在发射一次主干js后停止工作

1 个答案: