如何处理点击事件上的特定目标骨干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时，它没有发出警报。当我第二次点击时，它会给div的班级（work）发出1个警报，而不是我单击的li的班级。

如果我点击li第n次，它会给我n-1个警报。为什么会发生？无论是第n次还是第7次单次点击，它都只能提供一次警报。

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

Answer 1

看来，每次点击时，您都会添加一个显示警报的点击侦听器。所以结果是有道理的。由于只有在点击时才会调用“绘画”，只需将您的警报直接放入即可：

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