Question

<!DOCTYPE HTML > 
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

        <script src="jquery.js">
    </script> 

    <script src="underscore.js">

    </script> 
    <script src="backbone.js">
    </script> 
    <script>
        var View = Backbone.View.extend({

            el: '#listen_to_box',

            events: { 
                'click [type="checkbox"]':'clicked',
            },
        clicked : function(event ) { 
            console.log("events handler for "+  this.el.outerHTML);
        }
    });

    </script>

    <div id="listen_to_box">
        <input type="checkbox" />
    </div>

</body>
</html>

当我点击复选框时，点击的功能没有被调用，请帮我关联复选框上的点击事件的监听器功能。谢谢

Answer 1

你的代码看起来很完美。您已经定义了名为Backbone View的{{1}}，并且在尝试在视图上创建新实例时附加了事件。因此事件永远不会附加..

只需创建一个新实例，您的代码就可以运行。

View 或 var view = new View();应该

<强> Check Fiddle

您的代码在页面上遇到元素之前运行。要使其工作，您需要在结束标记之前移动代码或将代码包含在new View()

中

Document Ready handler

Answer 2

您的问题是，在定义el类时传入View，而不是在实例化View类时传入它。试试这个：

var View = Backbone.View.extend({
    events: {
        'click [type="checkbox"]': 'clicked',
    },
    clicked: function (event) {
        console.log("events handler for " + this.el.outerHTML);
    }
});

// Pass in el when instantiating the view
new View({
    el: $("#listen_to_box")
});

查看working fiddle here。

Answer 3

change to  
clicked: function (event) {
    console.log("events handler for " + this.$el.outerHTML);
}

看看是否有帮助

骨干视图单击复选框监听器

3 个答案: