jquery - 禁用按钮子点击

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

使用普通的 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>

基本上它将单击的元素传递给函数，并且函数从元素本身（如果有）或父元素（如果没有）显示“email_address_id”