Wie könnte ich Eltern-Eingabe-div des Ereignisdelegaten jquery

Question

Ich versuche, Wert in Eingabefelder von Artikelname, Beschreibung usw. setzen Unten ist der HTML-Code.

<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> 

Und die Funktion ist unten. Ich habe es mit der engsten() Methode versucht, das funktioniert nicht für mich.

$(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 

    }); 
}); 

Ich suchte nach diesem Problem vor, aber die Lösungen lösen mein Problem nicht. Sie konzentrieren sich hauptsächlich auf Kinder.

Answer 1

Ihr Problem ist, dass Sie klar .output6, bevor Sie finden Eltern

und ich schlage vor, Sie .parents (Selektor) für find Mutter

Details zu verwenden: 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 
    }); 
}); 

und ich schlage vor, Sie verwenden .on anstelle von .delegate

Details: .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 
    }); 
});