Question

如何找到名为.item-name的活动（此）类？由于这些项目是动态的我使用.find，但我想我需要在这里添加.parent()。

$(this).find('.item-name').val(customers.product);

HTML：

<tr class="item-row">
              <td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]">Hourly Rate</textarea>
              <a class="delete" href="javascript:;" title="Remove row">X</a>
              <a class="add-product" href="javascript:;" title="Add Product">O</a>
              </div></td>
              <td class="description"><textarea form ="testinsert" name="item_desc[]">Business Rate: Consulting/Labor/Installs</textarea></td>
              <td><textarea class="cost" form ="testinsert" name="item_cost[]">$150.00</textarea></td>
              <td><textarea class="qty" form ="testinsert" name="item_qty[]">3</textarea></td>
              <td><span class="price" form ="testinsert" name="item_price[]">$450.00</span></td>
</tr>

JAVASCRIPT：

function populateTableRow($tableBody, data, selectedCustomerAutonum) {
                    var customers;
                    $.each(data, function() {
                        if (this.autonum == selectedCustomerAutonum) {
                            customers = this;
                            return false;
                        }
                    });

                    $(this).find('.item-name').val(customers.product);
                    $(this).find('.item-desc').val(customers.disc);
}

更新（填充所有产品和desc）：

$('.add-product').click(function(){
//$('.add-product').live('click',function(){
// **************************************
    $("#productdiv").css("display", "block");

    $.ajax({                                      
        url: 'product_fill.php',                         
        data: {action:"invoice"},                                             
        dataType: 'json',                   
        success: function(data){
            populateSelectBoxes($('#productdiv #ddproduct'), data);

            function populateSelectBoxes($select, data) {
                var products = [];
                $.each(data, function() {
                    products.push('<li data-value="'+this.autonum+'">' + this.product + '</li>');
                });
                $select.append(products.join(''));
            }

            function populateTableRow($addProduct, data, selectedCustomerAutonum) {
                var customers;
                $.each(data, function() {
                    if (this.autonum == selectedCustomerAutonum) {
                        customers = this;
                        return false;
                    }
                });

                $addProduct.parents().find("textarea[name^='item_name']").val(customers.product);
                $addProduct.parents('.item-row').find("textarea[name^='item_desc']").val(customers.disc);
                $addProduct.parents('.item-row').find("textarea[name^='item_cost']").val(customers.rate);

            }

            $('#productdiv #ddproduct li').click(function(e) {
                var selection = $(this).attr("data-value");
                $(this).parent().parent().parent().hide();
                populateTableRow($('.add-product'), data, selection);
                $('ul').empty();
            });


        }
    });

Answer 1

这些行：

                $(this).find('.item-name').val(customers.product);
                $(this).find('.item-desc').val(customers.disc);

正在查找类名为item-name和item-desc的所有元素（即<textarea class="item-name">，这些元素在HTML中没有。您需要定位name属性会匹配。

                $(this).find("textarea[name^='item-name']").val(customers.product);
                $(this).find("textarea[name^='item-desc']").val(customers.disc);

难以根据您显示的代码查明，但是，您可能还需要使用$tableBody.find()而不是$(this).find()，因为在此范围内，$(this)可能为空。

Answer 2

我的问题是在populateTableRow()函数中更新元素与点击的锚点相同，以触发$（＆＃39; .add-product＆＃39;）。live（＆＃39;点击＆＃39; ...事件处理程序。

在单击处理程序范围内创建变量并从populateTableRow（）

中引用变量的解决方法

在正确的范围内添加了var clickedRow：

$('.add-product').live('click',function(){

var clickedRow = $(this).closest("tr");  // <--- ADD THIS PART

$("#productdiv").css("display", "block");

$.ajax({                                      
  url: 'product_fill.php',                         
  data: {action:"invoice"},                                             
  dataType: 'json',                   
  success: function(data){
    populateSelectBoxes($('#productdiv #ddproduct'), data);

    function populateSelectBoxes($select, data) {
        var products = [];
        $.each(data, function() {
            products.push('<li data-value="'+this.autonum+'">' + this.product + '</li>');
        });
        $select.append(products.join(''));
    }

    function populateTableRow(data, selectedCustomerAutonum) {
        var customers;
        $.each(data, function() {
            if (this.autonum == selectedCustomerAutonum) {
                customers = this;
                return false;
            }
        });
        clickedRow.find("textarea[name^='item_name']").val(customers.product);
        clickedRow.find("textarea[name^='item_desc']").val(customers.disc);
        clickedRow.find("textarea[name^='item_cost']").val(customers.rate);
    }

    $('#productdiv #ddproduct li').click(function(e) {
        var selection = $(this).attr("data-value");
        $(this).parent().parent().parent().hide();
        populateTableRow(data, selection);
        $('ul').empty();
    });
}
});

JQuery查找父元素或查找

2 个答案: