Question

我的按钮：

<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。

Answer 1

您可以执行以下操作：

<强> 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');
}

Answer 2

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

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

Answer 3

使用普通的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”（如果有的话）或父元素（如果没有）

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

3 个答案: