时间戳

首页 > 解决方案 > 如何通过单击包含在 div 中的锚标记来获取跨度数据？

javascript - 如何通过单击包含在 div 中的锚标记来获取跨度数据？

问题描述

我已经div使用 jQuery 创建了一个动态的。该 div 将包装两个元素 1. 是<span>2.<a>代码如下所示：-

$("div").delegate(".dateEdit", "click", function(e){
  e.preventDefault();
  alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class= "specific">
      <span id= "0">some data of 1</span>
      <a class="dateEdit" id="0" href="#" data-toggle="modal" data-target="#thirdModal">
       button
      </a>
  </div>
</div>

<div class="content">
  <div class= "specific">
      <span id= "1">some data of 2</span>
      <a class="dateEdit" id="1" href="#" data-toggle="modal" data-target="#thirdModal">
      button
      </a>
  </div>
</div>

<div class="content">  
  <div class= "specific">
      <span id= "3">some data</span>
      <a class="dateEdit" id="3" href="#" data-toggle="modal" data-target="#thirdModal">
       button
      </a>
  </div>
</div>

我将如何通过单击其锚标记来获取特定跨度的文本，以及如何在不使用 div 的情况下仅显示一次警报框$('.specific')。谢谢你。

标签： javascriptjqueryhtml

解决方案

你可以试试$(this).prev('span')。

请注意：该on()语法是 jQuery 1.7 的新语法，它旨在替代 bind(),delegate()和live().

$("body").on("click", ".dateEdit", function(e){
  //e.preventDefault();
  alert($(this).prev('span').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class= "specific">
      <span id= "0">some data of 1</span>
      <a class="dateEdit" id="0" href="#" data-toggle="modal" data-target="#thirdModal">
       button
      </a>
  </div>
</div>

<div class="content">
  <div class= "specific">
      <span id= "1">some data of 2</span>
      <a class="dateEdit" id="1" href="#" data-toggle="modal" data-target="#thirdModal">
      button
      </a>
  </div>
</div>

<div class="content">  
  <div class= "specific">
      <span id= "3">some data</span>
      <a class="dateEdit" id="3" href="#" data-toggle="modal" data-target="#thirdModal">
       button
      </a>
  </div>
</div>

推荐阅读