2013-09-02 2 views
0

У меня есть следующий код:Невозможно получить родственный текст элемента с JQuery

<table> 
    <tr> 
     <td>2 <i class="increase_quantity hidden-print icon-plus-sign"></i> <i class="decrease_quantity hidden-print icon-minus-sign"></i></td> 
     <td class="price_setup">0.0</td> 
    </tr> 
</table> 

JQuery

$(document).on('click', '.increase_quantity', function() { 
    alert('Setup Price: ' + $(this).closest('td').siblings('td.price_setup').text()); 
    return false; 
}); 

Проблема заключается в том, что результат будет пустым. Я на самом деле пытался parseFloat, но продолжал получать NaN, поэтому взял это сейчас.

Update

tr в настоящее время добавляется к столу с помощью Ajax запроса

// ajax callback 
// append result of ajax request 
$('#line_items tbody:last').append(data); 

Fiddle: http://jsfiddle.net/f49V8/11/ (который работает)

Ajax ответ действует HTML, содержащий разметку из выше.

Edit - Полный код

Я прошел через это с мелкими зубьями и честно не вижу ничего плохого, так собирается опубликовать полный соответствующий код в надежде кого-то пятнистость.

Rails

class PriceListItemController < ApplicationController 
    def get_info 
    if params[:id] != '' 

     product = PriceListItem.find_by_id(params[:id]) 

     total = product.price_setup + (product.price_rental * product.contract_length) 

     next_item = params[:no_items].to_i + 1 

     output = '<tr><td>' + next_item.to_s + '</td><td>' + product.product_type + '</td><td>' + product.description + '</td><td>1 <i class="increase_quantity hidden-print icon-plus-sign"></i></td><td class="price_setup">' + product.price_setup.to_s + '</td><td class="price_rental">' + product.price_rental.to_s + '</td><td class="contract_length">' + product.contract_length.to_s + ' months</td><td class="total">' + total.to_s + '</td></tr>' 

     render :text => output 
    end 
    end 

end 

HTML

<div class="row-fluid"> 
    <table id="line_items" class="table table-striped table-hover"> 
     <thead> 
      <tr> 
       <th>#</th> 
       <th>Item</th> 
       <th>Description</th> 
       <th>Quantity</th> 
       <th>Setup Cost</th> 
       <th>Rental Cost</th> 
       <th>Contract Term</th> 
       <th>Total</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr id="blank"> 
       <td>-</td> 
       <td>-</td> 
       <td>-</td> 
       <td>-</td> 
       <td>-</td> 
       <td>-</td> 
       <td>-</td> 
       <td>-</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

JQuery

var no_items = 0; 

$('#add_product').click(function() { 
     $.ajax({   
      url: '/price_list_item/get_info', 
      data: { id: $('#products_list').val(), no_items: no_items }, 
      dataType: 'html', 
      type: "GET", 
      cache: false,   
      success: function(data) { 
       no_items++; 

       // append result of ajax request 
       $('#line_items tbody:last').append(data); 

       // remove blank row 
       $('#blank').remove(); 

       var sub_total = 0; 
       var vat; 

       // update totals 
       $('.total').each(function(i) { 
        sub_total += parseFloat($(this).text()); 
       }); 

       vat = sub_total * 0.2; 
       total = vat + sub_total; 

       $('#sub_total').text('£' + sub_total); 
       $('#vat').text('£' + vat); 
       $('#total').text('£' + total); 

      }, 
      error: function(){ 
       alert('An error occurred, please refresh the page and try again'); 
      } 
     }); 

    }); 

$(document).on('click', '.increase_quantity', function() { 

     var quantity = parseInt($(this).parent().text()); 
     var new_quantity = quantity + 1; 

     if (new_quantity > 1) { 

      $(this).closest('td').html(new_quantity + ' <i class="increase_quantity hidden-print icon-plus-sign"></i> <i class="decrease_quantity hidden-print icon-minus-sign"></i>'); 

      // readjust total for this line item 
      var setup_cost  = parseFloat($(this).closest('td').siblings('td.price_setup').text()); 
      var rental_cost  = parseFloat($(this).closest('td').siblings('td.price_rental').text()); 
      var contract_length = parseInt($(this).closest('td').siblings('td.contract_length').text()); 

      alert(setup_cost); 

      var total = setup_cost + (rental_cost * contract_length); 

      $(this).parent().parent().children('.total').text(total); 

      // update totals 
      $('.total').each(function(i) { 
       sub_total += parseFloat($(this).text()); 
      }); 

      vat = sub_total * 0.2; 
      total = vat + sub_total; 

      $('#sub_total').text('£' + sub_total); 
      $('#vat').text('£' + vat); 
      $('#total').text('£' + total); 

     } 
     return false; 
    }); 
+2

Вам, кажется, не хватает открытия TR? – adeneo

+0

Извините, это была моя ошибка при создании вопроса, конечно, у меня было это, но он должен был удалить его при удалении ненужной разметки. – martincarlin87

+0

Вы не можете щелкнуть по элементу '.increase_quantity', поскольку он пуст. Если вы его заполняете, то это работает: http://jsbin.com/UdOmOqU/1/ –

ответ

0
<script> 
jQuery(document).ready(function() 
{ 
    jQuery(".increase_quantity").click(function() 
    { 
     alert('Setup Price: ' + $(this).parent('td').siblings('td.price_setup').html()); 
    }); 
}); 

</script> 

<table> 
    <tr> 
     <td>2 
     <i class="increase_quantity hidden-print icon-plus-sign">12</i> 
     <i class="decrease_quantity hidden-print icon-minus-sign"></i>12</td> 
     <td class="price_setup">10.0</td> 
    </tr> 
</table> 
Смежные вопросы