mgons mgons - 5 months ago 17
jQuery Question

How could I select parent input div of event delegate jquery

I am trying to put value into input fields of Item Name, Description etc.
Below is the 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>


And the function is below. I tried with closest() method this doesn't work for me.

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

});
});


I searched for this problem before but the solutions don't solve my problem. They mostly focus on children.

Answer

Your problem is your clear .output6 before you find parent

and I suggest you to use .parents(selector) for find parent

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

and I suggest you to use .on instead of .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
    });
});
Comments