Question

尝试填充在同一行中点击的<a class='add-product'>的textarea。行是动态创建的，没有唯一的ID，但都具有相同的类。

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

将填充正确的字段，但会使用所选结果填充所有动态行。（不填充发生点击事件的单行）？
我试过了：

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

但this似乎是null。

我的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">A</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>

  <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">A</a>
      </div></td>

      <td class="description"><textarea form ="testinsert" name="item_desc[]">Residential Rate: Consulting/Labor/Installs</textarea></td>
      <td><textarea class="cost" form ="testinsert" name="item_cost[]">$95.00</textarea></td>
      <td><textarea class="qty" form ="testinsert" name="item_qty[]">3</textarea></td>
      <td><span class="price" form ="testinsert" name="item_price[]">$285.00</span></td>
  </tr>

  <tr id="hiderow">
    <td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
  </tr>

JQuery的：

$('.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('.item-row').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();
            });


        }
    });

选择弹出窗口：

<div id="productdiv">
  <form class="form" action="product_fill.php" id="contact" method="GET">
  <img src="images/button_cancel.png" class="img" id="cancel"/>
  <h2>ProductList</h2>
  <ul id="ddproduct" name="ddproductname"></ul>
  </form>
</div>

Answer 1

在评论中，您澄清了您希望populateTableRow()函数更新同一<tr>中的元素，而不是单击用于触发$('.add-product').live('click'...事件处理程序的锚点。

最简单的方法是在范围内创建一个点击处理程序并从populateTableRow()内引用它的变量：

$('.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();
        });
    }
});

我已从populateTableRow()函数中移除了第一个参数，因为它不需要。

另请注意，.live()确实已过时（jQuery 1.7中已弃用，1.9中已删除）。如果您使用的是jQuery＆gt; = 1.7，最好使用.on()的委托语法，或者使用＆lt; 1.7但是＆gt; = 1.4.2使用.delegate()：

// instead of:
$('.add-product').live('click', function() { ...

// jQuery >= 1.7:
$('#idOfYourTable').on('click', '.add-product', function() { ...

// jQuery >= 1.4.2 && < 1.7
$('#idOfYourTable').delegate('.add-product', 'click', function() { ...

在动态创建的行中查找`this`元素

1 个答案: