jQueryのネストされたマークアップに

Question

こんにちはみんなをクラスを対象に、これは私が動的に作成されたフォームの彼らのclasses..this部分を使用してtextarea要素をターゲットにしようとしています私のフォーム

のための私のマークアップです。私はクラスを使用して直接要素をターゲットにしようとするたびに..同じクラスを持つすべての追加要素が同じ値が移入され、私のAJAX呼び出しからのJSONレスポンスからすべてのこれらのフィールドを移入しようとしています

<div class="panel-body"> 
        <div class="row"> 
         <div class="col-md-4"> 
          <div class="form-group"> 
           {{ Form::label('product_name', 'Product Name') }}<span id="error-product_name"></span> 
           <div class="input-group"> 
            {{ Form::select('product_name[]',$products, null, ['class' => 'form-control required products-list product_name', 'placeholder'=>'--Select Product--', 
            'data-msg-required'=>"Please select a product",'id'=>'product_name']) }} 
            <i class="input-group-btn"> 
             {{ Form::button('<i class="fa fa-plus"></i>', ['class' => 'btn btn-success','data-toggle'=>"modal", 'data-target'=>'#productModal']) }} 
            </i> 
           </div> 
          </div> 
         </div> 
         <div class="col-md-4"> 
          <div class="form-group"> 
           {{ Form::label('product_category', 'Category') }}<span id="error-product_category"></span> 
           {{ Form::select('product_category[]',[], null, ['class' => 'form-control required categories product_category', 'placeholder'=>'--Select Category--', 
           'data-msg-required'=>"Please select a category",'id'=>'categories']) }} 
          </div> 
         </div> 
         <div class="col-md-2"> 
          <div class="form-group"> 
           {{ Form::label('qty', 'Quantity') }}<span id="error-qty"></span> 
           <div class="input-group"> 
            {{ Form::text('qty[]', null, ['class' => 'form-control required qty','data-msg-required'=>"Please enter a quantity"]) }} 
            <i class="input-group-btn"> 
             {{ Form::button('<i class="fa fa-plus"></i>', ['class' => 'btn btn-success','data-toggle'=>"modal", 'data-target'=>'#aqlModal']) }} 
            </i> 
           </div> 
          </div> 
         </div> 
         <div class="col-md-2"> 
          <div class="form-group"> 
           {{ Form::label('unit', 'Unit') }}<span id="error-unit"></span> 
           {{ Form::select('unit[]',[], null, ['class' => 'form-control required unit', 'placeholder'=>'--Select Unit--', 
            'data-msg-required'=>"Please select a unit"]) }} 
          </div> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-md-6"> 
          <div class="form-group"> 
           {{ Form::label('po_no', 'PO Number') }}<span id="error-po_no"></span> 
           {{ Form::text('po_no[]', null, ['class' => 'form-control required po_no','data-msg-required'=>"Please enter the PO Number"]) }} 
          </div> 
          <div class="form-group"> 
           {{ Form::label('cmf', 'Color/Material/Finish') }}<span id="error-cmf"></span> 
           {{ Form::textarea('cmf[]', null, ['class' => 'form-control cmf','rows'=>'2']) }} 
          </div> 
          <div class="form-group"> 
           {{ Form::label('shipping_mark', 'Shipping Mark') }}<span id="error-shipping_mark"></span> 
           {{ Form::textarea('shipping_mark[]', null, ['class' => 'form-control shipping_mark','rows'=>'2']) }} 
          </div> 
         </div> 
         <div class="col-md-6"> 
          <div class="form-group"> 
           {{ Form::label('brand', 'Brand') }}<span id="error-brand"></span> 
           {{ Form::text('brand[]', null, ['class' => 'form-control required brand','data-msg-required'=>"Please enter the product brand"]) }} 
          </div> 

          <div class="form-group"> 
           {{ Form::label('tech_specs', 'Technical Specifications/Rating') }}<span id="error-tech_specs"></span> 
           {{ Form::textarea('tech_specs[]', null, ['class' => 'form-control tech_specs','rows'=>'2']) }} 
          </div> 
          <div class="form-group"> 
           {{ Form::label('additional_info', 'Additional Information') }}<span id="error-additional_info"></span> 
           {{ Form::textarea('additional_info[]', null, ['class' => 'form-control additional_info','rows'=>'2']) }} 
          </div> 
         </div> 
        </div> 
       </div> 

。私は、最も近い要素が私のajax呼び出しから取り込まれることを望みます。ここ

は私のjavascriptのコードのAjax成功内部

$('body').on('change','.product_name', function(){ 
    var product_id = $(this).find('option:selected').val(); 
    $.ajax({ 
     url : selectproduct, 
     type: 'POST', 
     data:{ 
      _token : token, 
      product_id : product_id 
     }, 
     beforeSend: function(){ 
      console.log('loading'); 
     }, 
     success: function(response){ 
      console.log(response); 
      $(this).next('.row').find('.shipping_mark').val(response.product.shipping_mark); 
     } 
    }); 
    }); 

Answer 1

thisが異なるオブジェクトを参照します。元の参照を変数に保存する必要があります。

$('body').on('change','.product_name', function(){ 
    var product_id = $(this).find('option:selected').val(); 
    var self = this; // save reference in a variable 
    $.ajax({ 
     url : selectproduct, 
     type: 'POST', 
     data:{ 
      _token : token, 
      product_id : product_id 
     }, 
     beforeSend: function(){ 
      console.log('loading'); 
     }, 
     success: function(response){ 
      console.log(response);//Use the saved reference in next line 
      $(self).next('.row').find('.shipping_mark').val(response.product.shipping_mark); 
     } 
    }); 
    }); 

Refer hereこの問題に関するその他のオプションについては、