将点击事件应用于 UL 内的 LI 而不是按钮

Question

我真的需要你的帮助。

我如何才能从按钮单击（重命名）以启动我的重命名功能到 UL LI 内的单击事件。我想将$('button').click(fn); 移动到值为“重命名”的 LI。当我离开按钮并创建一个单独的右键单击菜单时，触发我的重命名功能的单击事件来自 LI 单击是很重要的。

这是一个小提琴：http://jsfiddle.net/29objbzx/1/

附上预期结果的图片：

有问题的代码：

$(function(){


    $('#refdocs_list li').click(fn);

    $('button').click(fn);

    function fn(e){
    var el = $('#refdocs_list li.selected');
    if(e.target.type != "button"){
            el.removeClass('selected');
            $(e.target).addClass('selected');
    }else{  
        var txt = el.text(); 
        var newEl = $("<input id='rename_refdoc'>");
        newEl.blur(function(){
            el.html(newEl.val());       
        });
        newEl.val(txt);
        el.html(newEl);  
        newEl.focus().select();
    }     
    }   
})();

我在想：

$('#right-click-menu li:eq(5)').click(function(e) {
    fn(e);
});

但它也不起作用。

Answer 1

编辑： 只需将按钮处理程序添加到 li 并更改条件以检查 ID 而不是按钮目标。请参阅下面的代码。

注意：在您的 HTML 中删除了 onclick 函数并添加了 ID 属性为 renameLI

演示： http://jsfiddle.net/29objbzx/2/

    $('#renameLI').click(fn);
    $('#refdocs_list li').click(fn);

    function fn(e) {
      var el = $('#refdocs_list li.selected');
      if (e.target.id != "renameLI") {
        el.removeClass('selected');
        $(e.target).addClass('selected');
      } else {
        var txt = el.text();
        var newEl = $("<input id='rename_refdoc'>");
        newEl.blur(function() {
          el.html(newEl.val());
        });
        newEl.val(txt);
        el.html(newEl);
        newEl.focus().select();
      }
    }

* {
  font-family: Segoe UI;
  font-size: 9pt;
}
#refdocs {
  border: 0;
  width: 100%;
  height: auto;
  padding-left: 2px;
}
#refdocs_main {
  border-top: 1px solid rgb(170, 170, 170);
  border-left: 1px solid rgb(170, 170, 170);
  border-right: 1px solid rgb(170, 170, 170);
  border-bottom: 1px solid rgb(170, 170, 170);
  width: 179px;
  overflow: hidden;
  margin-bottom: 2px;
  margin-top: 1px;
}
#refdocs_main:hover {
  border-color: rgb(128, 128, 128);
}
#refdocs_container {
  border-bottom: 1px solid rgb(170, 170, 170);
  height: 20px;
}
#refdocs_wrapper {
  height: 116px;
  overflow-y: scroll;
  overflow-x: hidden;
}
#refdocs_list {
  width: 100%;
}
#refdocs_list ul {
  margin: 0;
  padding: 0px;
  list-style-type: none;
}
#refdocs_list li {
  cursor: default;
  padding: 2px;
}
#refdocs_main:hover,
#refdocs_main:hover #refdocs_container {
  border-color: rgb(128, 128, 128);
}
.selected {
  background: rgb(228, 228, 228);
}
#rename_refdoc {
  border: 0;
  width: 100%;
  padding: 0px;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button">rename</button>
<div id="refdocs_main">
  <div id="refdocs_container">
    <input type="text" id="refdocs" />
  </div>
  <div id="refdocs_wrapper">
    <div id="refdocs_list">
      <ul>
        <li>red</li>
        <li>green</li>
        <li>blue</li>
        <li>yellow</li>
        <li>orange</li>
        <li>purple</li>
      </ul>
    </div>
  </div>
</div>
<br>
<br>
<div id="right-click-menu">
  <ul>
    <li onclick="refdocs_copy()">Copy</li>
    <li onclick="refdocs_paste()">Paste</li>
    <li onclick="refdocs_add()">Add</li>
    <li onclick="refdocs_delete()">Cut</li>
    <li onclick="refdocs_clear()">Clear list</li>
    <li id="renameLI">Rename</li>
  </ul>
</div>

---

编辑：更新了您的代码以使用相同的功能。见下文，

DEMO

1. 删除了 else，因为我们要在点击 LI 时执行按钮功能
2. 如果第一次单击没有选择任何内容，则获取所选元素

代码：

$(function () {
    $('#refdocs_list li').click(function (e) {
        fn(e);
    });
    $('button').click(fn);

    function fn(e) {
        var el = $('#refdocs_list li.selected');
        if (e.target.type != "button") {
            el.removeClass('selected');
            $(e.target).addClass('selected');
        }
        el = $('#refdocs_list li.selected');
        var txt = el.text();
        var newEl = $("<input id='rename_refdoc'>");
        newEl.blur(function () {
            el.html(newEl.val());
        });
        newEl.val(txt);
        el.html(newEl);
        newEl.focus().select();

    }
});

---

如果我理解正确，您想在单击 LI 时重命名列表，就像单击重命名按钮一样。

$('#refdocs_list li').click(function (e) {
    fn(e);
    $('button').click();
});

DEMO