javascript - 如何处理主干js中特定目标的点击事件

Question

html 文件

<div class="work">
    <ul id="palette" class="palette-pen" style="top:178px;"> 
        <li class="palette-colour-1"><span></span></li>
        <li class="palette-colour-2"><span></span></li>
        <li class="palette-colour-3"><span></span></li>
        <li class="palette-colour-4"><span></span></li>
        <li class="palette-colour-5"><span></span></li> 
        <li class="palette-colour-6"><span></span></li>
    </ul>
</div>

js文件

VC.View.Workspace_Tool_Image = Backbone.View.extend({
    events : {  
        'click .palette-pen li' : 'paint'
    },

    initialize : function() {
        var obj = this;

        /* scope */
        _.bindAll(this, 'paint');
    },

    paint: function() {
        var obj = this;
        $('ul.palette-pen li').click(function(e) { 
            alert(obj.$el.attr('class'));
        });
    },
})

我想获取我单击的特定 li 的类，但是当我第一次单击 li 时，它不会发出警报。当我第二次单击时，它会发出 1 个警报，其中包含 div 的类(work)，而不是我的 li 的类点击。

如果我第n次点击li，那么它会给我n-1个警报。为什么会出现这种情况？无论我点击一次，无论是第n次还是第7次，它都必须只发出一次警报。

所以请帮我找出解决方案。

Answer 1

看来每次单击时，您都会添加一个显示警报的单击监听器。所以这个结果是有道理的。由于“paint”仅在您单击时被调用，因此只需将警报直接放入其中即可:

paint : function(e) {
    alert($(e.currentTarget).attr('class'));
},