禁用<span>按钮子项单击</span>

时间:2013-08-05 13:25:38

标签: jquery events twitter-bootstrap backbone.js click

我的按钮:

<span class="btn btn-default emailAddressEdit" email_address_id="55924"> 
  <i class="icon-edit"></i>
  <span>Edit</span>
</span>

我在Backbone中的事件绑定:

Events : {
  "click .emailAddressEdit" : "emailAddressEditClick",
}

问题是:如果我单击图标或内部SPAN,它不会传递email_address_id属性。从父母点击点击的优雅方式是什么?

编辑/回答

技巧是在事件处理程序中使用event.currentTarget

3 个答案:

答案 0 :(得分:2)

您可以执行以下操作:

<强> HTML

<span class="btn btn-default emailAddressEdit" data-email_address_id="55924"> 
     <i class="icon-edit"></i>
     <span>Edit</span>
</span>

<强>的Javascript

var emailAddressEditClick = function()
{
    var emailAddressId = $(this).closest('btn').data('email_address_id');
}

答案 1 :(得分:2)

之前我没有使用骨干事件,但是在jQuery事件处理程序this中是对与选择器匹配的元素的引用,不一定是被单击的元素。在这种情况下,你可以这样:

function emailAddressEditClick() {
    var emailAddressId = $(this).attr('email_address_id');
    //do something with ID here
}

答案 2 :(得分:1)

使用普通的vanilla JavaScript解决方案,您可以执行以下操作:

<span class="btn btn-default emailAddressEdit" email_address_id="55924" onclick="emailAddressEditClick(this);"> 
   <i class="icon-edit"></i>
   <span>Edit</span>
</span>

<script type="text/javascript">

    function emailAddressEditClick(elem) {
        alert(elem.getAttribute("email_address_id") || elem.parentElement.getAttribute("email_address_id"))
    }

</script>

基本上它将clicked元素传递给函数,函数显示元素本身的“email_address_id”(如果有的话)或父元素(如果没有)