Question

所以我正在这个大型项目中工作，所以我不是那么喜欢Javascript / Jquery，因为我还不能完全理解JS，所以我主要尝试使用插件...这就是为什么我的问题可能是基本或idk如此：

在此项目中，客户需要可编辑的输入，因此普通客户可以在所有字段中修改或设置新数据，因此我使用的插件名为：X-Editable（[Ex-Editable DOcumentation] [2 ]），问题是，每当有人第一次加载该页面时，它就会以“可编辑状态”加载该页面，因此每个人都可以在甚至单击按钮以启用编辑之前编辑该页面，因此

我让你们一个jsfiddle，这样您就可以看到我的代码（[JsFiddle] [1]）

＃1）我希望该页面默认情况下不可编辑，并且在单击按钮后突出显示该页面

我遇到的另一个问题是..同一个按钮既可以执行两项操作，又可以启用和禁用“可编辑状态”，所以我想使用两个不同按钮来启用编辑和其他以禁用编辑。

$(document).ready(function() {
    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'popup'; 
    
    $('#enable').click(function () {
        $('#user .editable').editable('toggleDisabled');
    });  
    
    //make username editable
    $('#username').editable({
                url: '/post',
                title: 'Enter comments',
                rows: 10
    });
    
    //make status editable
    $('#status').editable({
                value: 2,
                    source: [{
                            value: 1,
                            text: 'Active'
                        },
                        {
                            value: 2,
                            text: 'Blocked'
                        },
                        {
                            value: 3,
                            text: 'Deleted'
                        }
                    ]
    });
});

   <!-- bootstrap -->
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>  

    <!-- x-editable (bootstrap version) -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script>
    
    <!-- main.js -->
    <script src="main.js"></script>


<div class="container" id="user">

      <h1>Test editable input text</h1>

      <div id="user">
        <span>Username:</span>
        <a href="#" id="username" data-type="textarea" data-placement="bottom" data-title="Enter username"
          class="editable editable-click editable-empty">superuser</a>
      </div>
      
      <div>
        <span>Status:</span>
        <a href="#" id="status"></a>


      </div>

      <button id="enable" class="btn btn-default">enable / disable</button>

Answer 1

为什么不让点击可编辑后立即触发点击？

https://jsfiddle.net/o6Lfv1kt/

$('#enable').click(function () {
    $('#user .editable').editable('toggleDisabled');
}).trigger('click');

编辑：实际上，只是看了看文档，您可以这样做：

https://jsfiddle.net/j1r9ku2z/1/

$('#username').editable({
            url: '/post',
            title: 'Enter comments',
            rows: 10,
            disabled: true
});

Answer 2

如何将您的函数放入一个函数并从“启用”按钮事件处理程序中调用该函数。从禁用按钮只是破坏事件。

$(document).ready(function() {
  //toggle `popup` / `inline` mode
  $.fn.editable.defaults.mode = 'popup';

  $('#enable').click(function() {
    edit();
  });

  $('#disable').click(function() {

    $('#user .editable').editable('destroy');
  });

  function edit() {
     $('#username').editable({..});
     $('#status').editable({...});
  }
});

  <button id="enable" class="btn btn-default">enable</button>
  <button id="disable" class="btn btn-default">disable</button>

提琴手：https://jsfiddle.net/summoncse/x4zLqbp1/

如何在我的页面上默认禁用此功能

2 个答案: