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

Question

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

<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');
});

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

Answer 1

尝试将每个标签和输入包装到某个标签中，例如span，然后使用 click 事件来获取您单击的目标元素，然后使用此目标，您可以使用 JQueryprev()方法获取上一个兄弟并切换它。

在代码中它可能看起来像这样：

// 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();
});