jQuery在最後一個框上顯示按鈕

我遇到一個問題，無論何時點擊一個編輯按鈕，它都會通過顯示編輯狀態的每個框，然後着陸在最後一個輸入框上。我的代碼中的console.log顯示每個框被點擊的正確框jQuery在最後一個框上顯示按鈕

結果應該是每個框都有它自己的編輯功能。爲什麼代碼行走？

一般狀態：

當編輯按鈕被點擊：

的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 = ''; 
     } 
    } 
}); 

});

正常狀態HTML：（ '編輯'）

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

來源

2016-04-25 Jess McKenzie

@gibberish改變了問題 –

您的代碼不查找最接近的輸入，顯示和隱藏所有$元素。

$('.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(); // !! 
    })

來源

2016-04-25 01:12:07

jQuery在最後一個框上顯示按鈕

回答

相關問題