How could I select parent input div of event delegate jquery

Question

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.

`id="inv_2"` is repeated; which is invalid markup. – Shaunak D Jun 24 '16 at 06:11 — Shaunak D, Jun 24 '16 at 06:11
target the input using its `ID` – guradio Jun 24 '16 at 06:12 — guradio, Jun 24 '16 at 06:12
I cant as id is variable id_"+1" – mgons Jun 24 '16 at 06:34 — mgons, Jun 24 '16 at 06:34
Thnx for pointing this @ShaunakD – mgons Jun 24 '16 at 06:35 — mgons, Jun 24 '16 at 06:35

score 0 · Accepted Answer · edited May 23 '17 at 12:08

Your problem is you 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
    });
});

Thnx this works :) and good to now about .on method.I put $(".output6").html(""); at the end as you suggest. — mgons, Jun 24 '16 at 07:25

How could I select parent input div of event delegate jquery

1 Answers1