jQuery 在最后一个框中显示按钮

Question

我有一个问题，每当我点击一个编辑按钮时，它会在最后一个输入框登陆之前遍历每个显示编辑状态的框。我的代码中的 console.log 为每个单击的框显示正确的框

结果应该是每个框都有自己的编辑功能。为什么代码在走？

正常状态：

单击编辑按钮时：

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

Answer 1

您的代码不会寻找最接近的输入，而是显示和隐藏所有 $('.edit') 元素。

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

jQuery 在最后一个框中显示按钮

jQuery shows buttons on last box

html

javascript

jquery

x-editable