Jquery html5内容可编辑单击其他元素时如何选择All

我有一组div，它们的行为有点像输入框。当用户单击“编辑我的详细信息”按钮时，他应该能够编辑这些框。编辑框时，我希望在用户单击框上的任意位置时选择框的当前内容。问题是盒子的标签覆盖了它的一部分，我不知道如何称呼实际的盒子，即在要选择的标签下面

下面是问题代码简化版本的链接

这是我的HTML：

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-10 col-md-offset-1">
      <div class="row">
        <div class="col-sm-4">
          <div class="input-wrap">
            <div class="heading">
              <i class="fa fa-envelope iconic"></i>Home
            </div>
            <div class="edit2 input">12345</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="input-wrap">
            <div class="heading">
              <i class="fa fa-envelope iconic"></i>Home
            </div>
            <div class="edit2 input">12345</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3 col-xs-offset-5 col-sm-2 col-sm-offset-6">
      <button id="edit-user" class="btn btn-default"><i class="fa fa-pencil-square-o icon"></i>Edit My Details</button>
    </div>
  </div>
</div>

---

我认为您应该删除此单击函数中的heading类：

editableClickListeners: function($context)
  {
    $('.input-wrap').on('click', '.edit2', function() // remove heading class here
       {
          console.log(this);
         // When the editable field is clicked, select all inside
         document.execCommand('selectAll', false, null);
       });
  }

---

谢谢你的快速回答。这没什么区别，当我点击div.heading时，div.edit2.input中的文本没有被选中，这就是我所追求的行为。我在这里找到了解决问题的方法–正确的处理方法是什么？我应该用另一个StackOverflow线程的链接来回答它，还是干脆不回答？解决方案是使用[enter link description here][1][1]中描述的jQuery插件：

editableClickListeners: function($context)
  {
    $('.input-wrap').on('click', '.edit2', function() // remove heading class here
       {
          console.log(this);
         // When the editable field is clicked, select all inside
         document.execCommand('selectAll', false, null);
       });
  }