Question

我的情况是我在div中使用class＆＃39; contact-row＆＃39;动态创建以下元素：

<div class="row">
    <div class="col-md-12 edit-contact">
        <span data-ID="' + obj.ID + '">' + obj.Text + '</span>
        &nbsp;&#8211&nbsp;<span>' + obj.Notes + '</span>
        &nbsp;&nbsp;<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
    </div>
</div>

我有一个on（＆＃34; click＆＃34;）作为我想要获取第一个span的data属性内容的元素。我正在尝试这个：

$(".contact-row").on("click", ".edit-contact", function () 
    var $t = $(this);
    var ID = $t.children("span:has[data-ID]").attr('data-ID');
    alert(ID);
});

点击有效，但已提醒的ID未定义＆＃39;。有没有更好的方法来引用这个span的属性？

Answer 1

要检查元素是否具有属性，您只需使用element[attrib]，我认为您在使用联系人添加行时会使用更高级别的div级别，但如果情况不是这样的话您可以只使用contact_rows以外的选择器，因为find会在任意深度找到子元素，并且会重新使用data函数来获取data-something属性< / p>

＆＃13;

$(".contact_rows").on("click", ".edit-contact", function () {

var $t = $(this);
var ID = $t.find("span[data-ID]").data('id');

alert(ID);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact_rows">
  <div class="row">
      <div class="col-md-12 edit-contact">
          <span data-ID="WANTED ID">SPAN CONTAING DATA ID</span><br>
        <span >GARBAGE DATA</span><br>
        <span>SOMETHING</span>

      </div>
    </div>
  
</div>

＆＃13;

Answer 2

var ID = $t.find("span:first-child").attr('data-id');

用小写字母ID做了诀窍！

从子选择器检索数据属性的值

2 个答案: