Question

这里我在ajax成功响应之后追加表元素，它的工作正常，代码是......

 $.ajax({
          type: 'GET',
          url: '{{ route("shipping_address") }}',
          dataType: 'JSON',
          data: myData,
          success: function(data) {
                var x=data['rates'];
                var table = '<table class="rates"><tr><th>Providers</th><th>Days</th><th>Price</th></tr>'
                $.each(data['rates'], function (key, val) {
                  table +=  '<tr><td><input type="radio" name="shipment_radio" id="shipment_radio"></td><td id="providers">'+val.provider+'</td><td id="days">'+val.days+'</td><td id="amount">'+val.amount+'</td></tr>'                 
               });
               table += '</table>';
               var result = $('#shipping').append(table);
          },
          error: function(jqXHR, textStatus, errorThrown) {
              console.log(JSON.stringify(jqXHR));
          }
    });

它附加在html元素

中的div内

<div id="shipping">
</div>

我想获得已检查的表值，这意味着当我点击第一个单选按钮我想要那个表数据价格然后我检查第二个收音机我想要那个表价格.. 我试试这个

 $(document).on('change', '#shipment_radio' ,function() {
      $('.rates').removeClass("checked");
      $(this).parent().parent().addClass("checked");
      var price = $('.checked').find('td#days').text();
      alert(price);
        });

但我没有得到正确的结果

如何实现这一目标...请帮助我

Answer 1

问题在于：

$.each(data['rates'], function (key, val) {
    table +=  '<tr><td><input type="radio" name="shipment_radio" id="shipment_radio"></td><td id="providers">'+val.provider+'</td><td id="days">'+val.days+'</td><td id="amount">'+val.amount+'</td></tr>'                 
});

此处您使用shipment_radio作为ID，但其出现次数不止一次。因此，不要使用ID使用Class选择器代替：{/ p>

class="shipment_radio"

并向其添加事件侦听器：

$(document).on('change', '.shipment_radio' ,function() {

Answer 2

理想情况下，你应该拥有一个唯一的id，所以不要使用class，因为你正在循环它。

 $.each(data['rates'], function (key, val) {
              table +=  '<tr><td><input type="radio" name="shipment_radio" class="shipment_radio"></td><td class="providers">'+val.provider+'</td><td class="days">'+val.days+'</td><td class="amount">'+val.amount+'</td></tr>'                 
           });

然后你可以从收音机的父母那里获得td class days来获得他所需的结果。一个td元素。另外closest是比使用多个parent函数

更好的选择

$(document).on('change', '.shipment_radio' ,function() {
      $('.rates').removeClass("checked");
      $(this).closest('tr').addClass("checked");
      var price = $(this).parent().next('.days').text();
      alert(price);
});

Answer 3

您是创建具有重复标识符的元素，这会使HTML无效，因为HTML中的标识符必须唯一

使用公共类绑定事件处理程序

 $.each(data['rates'], function (key, val) {
     table +=  '<tr><td><input type="radio" name="shipment_radio" class="shipment_radio"></td><td class="providers">'+val.provider+'</td><td class="days">'+val.days+'</td><td class="amount">'+val.amount+'</td></tr>'                 
 });

然后你可以通过DOM关系遍历并定位它们

$(document).on('change', '.shipment_radio' ,function() {
    $('.rates').removeClass("checked");
    var tr = $(this).closest('tr');
    tr.addClass("checked");
    var price = tr .find('.days').text();
    console.log(price);
});

更改div时获取已检查的无线电表数据值

3 个答案: