jQuery zeigt Schaltflächen auf der letzten Box

Question

Ich habe ein Problem, wo jedes Mal, wenn ich auf eine Bearbeitungsschaltfläche klicke, es durch jedes Feld mit dem Bearbeitungsstatus vor der Landung auf dem letzten Eingabefeld geht. Die console.log in meinem Code zeigt die richtige Box für jede Box geklickt

Das Ergebnis sollte sein, dass jede Box seine eigene Bearbeitungsfunktion hat. Warum läuft der Code?

Normalzustand:

Wenn eine Schaltfläche Bearbeiten geklickt wird:

jQuery:

$(function(){ 


$.fn.editable.defaults.mode = 'inline'; 

$.fn.editable.defaults.params = function (params) { 
    params._token = $("#_token").data("token"); 
    return params; 
}; 
    var dataURL = $('.updateField').data('url'); 
    var inputName = $('.updateField').attr("name"); 

$('.updateField').editable({ 
    type: 'text', 
    url: dataURL,  
    name: inputName,  
    placement: 'top', 
    title: 'Enter public name', 
    toggle:'manual', 
    send:'always', 
    ajaxOptions:{ 
     dataType: 'json' 
    }  
}); 

$('.edit').click(function(e){ 
    var container = $(this.closest('.input-group')); 
    var input  = container.find('.updateField'); 
    var inputName = input.attr('name'); 
    var dataURL = input.data('url'); 

     console.log(inputName); 
     e.stopPropagation(); 
     $('.updateField').editable('toggle'); 
     $('.edit').hide(); 
}); 
    $(document).on('click', '.editable-cancel, .editable-submit', function(){ 
     $('.edit').show(); 
    })   
//ajax emulation. Type "err" to see error message 
$.mockjax({ 
    url: '/post', 
    responseTime: 100, 
    response: function(settings) { 
     if(settings.data.value == 'err') { 
      this.status = 500; 
      this.responseText = 'Validation error!'; 
     } else { 
      this.responseText = ''; 
     } 
    } 
}); 

}); 

Normalzustand HTML: ('bearbeiten')

<input name="__RequestVerificationToken" type="hidden" value="{{ csrf_token() }}" /> 
    <div class="box-body"> 
     <div class="form-group"> 
     <label class="col-sm-2 control-label" for="siteName">Website Name</label> 

     <div class="col-sm-3"> 
      <div class="input-group"> 
      <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1)}}" data-title="Website Name" name="siteName" placeholder="Email" type="input" value="{{ old('siteName', $siteSettingsData->siteName)}}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span> 
      </div> 
     </div> 
     </div> 


     <div class="form-group"> 
     <label class="col-sm-2 control-label" for="siteEmail">Website E-Mail Address</label> 

     <div class="col-sm-3"> 
      <div class="input-group"> 
      <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1) }}"data-title="Website E-Mail Address" name="siteEmail" placeholder="Site E-Mail" type="email" value="{{ old('siteEmail', $siteSettingsData->siteEmail) }}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span> 
      </div> 
     </div> 
     </div> 


     <div class="form-group"> 
     <label class="col-sm-2 control-label" for="siteCopyright">Website Copyright</label> 

     <div class="col-sm-3"> 
      <div class="input-group"> 
      <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1)}}" data-title="Website Copyright" name="siteCopyright" placeholder="Site Copyright" type="input" value="{{ old('siteCopyright', $siteSettingsData->siteCopyright)}}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span> 
      </div> 
     </div> 
     </div> 
    </div> 
    <!-- /.box-body --> 

Answer 1

Ihr Code sieht nicht für die am nächsten Eingang, Shows und blendet alle $ Elemente.

$('.edit').click(function(e){ 
    var container = $(this).closest('.input-group'); // !! 
    var input  = container.find('.updateField'); 
    var inputName = input.attr('name'); 
    var dataURL = input.data('url'); 

     console.log(inputName); 
     e.stopPropagation(); 
     container.find('.updateField').editable('toggle'); // !! 
     container.find('.edit').hide(); // !! 
}); 
    $(document).on('click', '.editable-cancel, .editable-submit', function(e){ 
     $(e.target).closest('.input-group').find('.edit').show(); // !! 
    })