Question

我有一个如下所示的列表

<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td><span class="span_view">1</span><a class="view_class">View</a></td>
</tr>
<tr>
<td>value1</td>
<td>value2</td>
<td>value3</td>
<td><span class="span_view">2</span><a class="view_class">View</a></td>
</tr>

如果我点击查看链接，那么它应该打印相关的跨度值，例如，对于第一个视图，它将是1，对于第二个，它将是2。我写了以下代码，但它没有打印值：

$('.view_class').live('click',function(){
   var parentDiv = $(this).closest('span');
   alert(parentDiv);
   var curprice=parentDiv.find('span[id=span_view]').val();
   alert(curprice);
 });

它显示[object Object]和undefined。请指导我问题在哪里。提前谢谢。

Answer 1

取代：

$('.view_class').live('click',function(){
   var parentDiv = $(this).closest('span');
   alert(parentDiv);
   var curprice=parentDiv.find('span[id=span_view]').val();
   alert(curprice);
 });

在：

$('.view_class').on('click',function(){
   var curprice=$(this).closest('span.span_view').html();
   alert(curprice);
 });

Answer 2

尝试：

$('.view_class').on('click',function(){
   var parentDiv = $(this).parent();
   var curprice = parentDiv.find('.span_view').html();
   alert(curprice);
 });

使用父级作为 上下文 来创建更易于维护的代码。如果您需要重新订购跨度，您的代码仍然有效。

或者使用委托事件仅附加1个事件处理程序，并且如果您使用ajax动态加载列表，也可以使用。

$(document).on('click','.view_class',function(){
       var parentDiv = $(this).parent();
       var curprice = parentDiv.find('.span_view').html();
       alert(curprice);
     });

在jquery中找到当前span值的值

2 个答案: