イベント代理jqueryの親入力divを選択する方法

Question

アイテム名、説明などの入力フィールドに値を入力しようとしています 以下はhtmlコードです。

<div class="input_fields_wrap"> 
    <div class="input_fields_subwrap"><!-- this div is repeatable(dynamic form)--> 
     <div id="inv_2" class="inv_spacer" title=""> 
      <span class="inv_ip_nme">Item No.</span> 
      <input type="text" data-type="productCode" name="data[Invoice][itemNo][]" id="itemNo_2" class="form-control prctiteno" style="display: inline; width: 7%;" title="" placeholder="Product ID" maxlength=""> 
      <span class="output6"> 
       <div id="output"><!--this div is results from instant search --> 
        <div class="PrctName">ProduY5Aey</div> 
        <div class="PrctName">Prct1Rsmra</div> 
        <div class="PrctName">Prct1XYatj</div> 
       </div> 
      </span> 
      <span class="inv_ip_nme">Item Name 
       <div class="star">*</div> 
      </span> 
      <input type="text" data-type="productName" name="data[Invoice][itemName][]" id="itemName_2" class="form-control ProductName" style="display: inline; width: 25%;" title="" placeholder="" maxlength=""> 
      <span class="inv_ip_nme">Discription</span> 
      <input type="text" data-type="productDiscription" name="data[Invoice][itemDiscription][]" id="itemDiscription_2" class="form-control" style="display: inline; width: 25%;" title="" placeholder="" maxlength=""> 
     </div> 
     <div id="inv_2" class="inv_spacer" title=""> 
      <span class="inv_ip_nme">Price 
       <div class="star">*</div> 
      </span> 
      <input type="number" step="1" min="0" name="data[Invoice][price][]" id="price_2" class="form-control Invprice" style="display: inline; width: 10%;" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" title="" placeholder="" maxlength=""> 
      <span class="inv_ip_nme">Quantity 
       <div class="star">*</div> 
      </span> 
      <input id="Quantity_2" type="number" name="data[Invoice][itemQuantity][]" step="1" min="0" class="form-control Invquantity" style="display: inline; width: 9%;" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" title="" placeholder="" maxlength=""> 
      <span class="inv_ip_nme">Discount</span> 
      <input id="Discount_2" type="number" name="data[Invoice][itemDiscount][]" step="0.01" min="0" max="100" class="form-control Invdiscount" style="display: inline; width: 10%;" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" title="" placeholder="" maxlength=""> 
      <span class="inv_ip_nme">Total</span> 
      <input id="Total_2" type="text" class="form-control Invamount" name="data[Invoice][itemTotal][]" style="display: inline; width: 20%;" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" title="" placeholder="" maxlength=""> 
     </div> 
     <a href="#" class="remove_field">Remove</a> 
    </div> 
</div> 

機能は以下のとおりです。私はclosest（）メソッドで試してみましたが、これは私にとってはうまくいきません。

$(function(){ 
    $('.input_fields_wrap').delegate('.PrctName','click',function(e){ 
     $(".output6").html(""); 
     var tr = $(this).parent().parent(); 
     output = "Some value for input"; 
     tr.find(".ProductName").val(output);//Yes I stuck here 

    }); 
}); 

解決方法は私の問題を解決していません。彼らは主に子供たちに焦点を当てている。

Answer 1

あなたの問題はあなたが.output6明らかであるあなたが親

を見つける前に、私はあなたが検索の親のために

詳細.parents（セレクタ）を使用することをお勧め：https://api.jquery.com/parents/

$(function(){ 
    $('.input_fields_wrap').delegate('.PrctName','click',function(e){ 
     var tr = $(this).parents('.inv_spacer'); 
     $(".output6").html(""); 
     output = "Some value for input"; 
     tr.find(".ProductName").val(output);//Yes I stuck here 
    }); 
}); 

を

との代わりに.onを使用することをお勧めします。の

詳細：.delegate() vs .on()

$(function(){ 
    $('.input_fields_wrap').on('click', '.PrctName',function(e){ 
     var tr = $(this).parents('.inv_spacer'); 
     $(".output6").html(""); 
     output = "Some value for input"; 
     tr.find(".ProductName").val(output);//Yes I stuck here 
    }); 
});