如何仅切换被点击的元素？为什么“点击”没有触发？答案

【问题标题】：How can I toggle only the element which was clicked? And why is 'clicking' not firing?如何仅切换被点击的元素？为什么“点击”没有触发？
【发布时间】：2016-04-28 14:01:52
【问题描述】：

切换适用于具有此命名类的所有元素。如何将其更改为仅我单击的元素？

<input type="file" id="file-input" multiple>
<div id="file-list">
</div>

$('#file-input').change(function(e) {
  for (var i = 0, f; f = files[i]; i++) {

      var reader = new FileReader();
      reader.readAsBinaryString(f);
      ....

      reader.onload = function(e) {
         var label1, text1="Text1", labelEdit;
         label1 = '<span class="editable">' + text1 + '</span> + 
                  '<input class="editable" type="text" style="display:none">'
         labelEdit = "<a class="edit">Edit</a> 

         $('file-list').append(label1, labelEdit);             

     }
   }
}

$('.edit').click(function() {
     $(this).closest('.editable').toggle();
     alert('clicked');
});

我正在尝试在“编辑”链接之前切换标签和输入。不知何故，点击没有触发。我错过了什么？

【问题讨论】：

提供一个工作示例来说明您的问题

标签： javascript toggleswitch

【解决方案1】：

尝试包装每个标签并输入到某个标签中，比如span，然后使用点击事件来获取您点击的目标元素，然后使用此目标您可以通过JQuery prev() 方法和切换它。

在代码中可能如下所示：

// your code here
label1 = '<span><span class="editable">' + text1 + '</span> + 
         '<input class="editable" type="text" style="display:none"></span>';
labelEdit = "<a class="edit">Edit</a>"; 
// some code again

然后这样

$('.edit').click(function (e) {
    $(e.target).prev().toggle();
});

【讨论】：