Question

我无法弄清楚为什么视图内的事件的jquery click事件不会触发..

我有这样的骨干视图：

class TreeList extends Backbone.View
    el: "#tree-list"
    events:
        "click li span":"toggleTree"
        "click li .select":"selectChannel"
    template: _.template """
        <ul id="tree"></ul>
    """
    initialize: =>
        $(@el).undelegate('li span', 'click');
        $(@el).undelegate('li .select', 'click');
        $("body").css "cursor", "progress"
        @render()
    render: =>
        $(@el).html @template
        _.each @collection.models, (model) =>
            item = new TreeListItem model:model
            $("#tree").append item.render()
            if model.attributes.selected
                            console.log($("##{model.attributes.ChannelID} .select"))
                $("##{model.attributes.ChannelID} .select")[0].click() # this event is never fired (selectChannel event)
        return this
    toggleTree: (e) =>
        console.log "toggle tree"
    selectChannel: (e) =>
        console.log "selet channel"

正如你所看到的那样，当我点击它时，我会在元素上调用click事件触发 toggleTree 事件，而不是使用jquery click方法。

该元素的console.log：

[i.icon-check-empty select, prevObject: x.fn.x.init[1], context: document, selector: "#d972c967-6b56-40b5-99c9-a25300c03341 .select", jquery: "1.10.2", constructor: function…]

将元素的背景设置为黑色确实有效..

$("##{model.attributes.ChannelID} .select").css
    background:"#000"

任何人都可以解释为什么会这样吗？

Answer 1

我认为元素没有添加到DOM树中。您的代码是：

$("#tree").append item.render()

您应该完成以下操作：

$("#tree").append item.render().el

你出现错误存在的原因是你使用

进行检查

model.attributes.selected

您的模型视图已呈现，但从未添加到DOM树中。我认为最好检查一下你的DOM树中是否存在一个组件，就是右击你的“Tree”并在Firefox或Chrome中使用“Inspect Element”功能。

在视图内部未被jquery单击事件触发的骨干事件

1 个答案: