Wie kann ich nur das Element umschalten, auf das geklickt wurde? Und warum schießt das Klicken nicht?

Question

Schaltet die Anwendung auf alle Elemente mit dieser benannten Klasse um. Wie kann ich dies nur für das Element ändern, auf das ich geklickt habe?

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

Ich versuche, die Bezeichnung und die Eingabe vor 'Edit' Link umschalten. Irgendwie wird der Klick nicht ausgelöst. Was vermisse ich?

Answer 1

versuchen, jedes Label und Einsatz in einen Tag zu wickeln, sagen span und dann Ereignis verwenden, klicken Sie auf das Zielelement erhalten Sie geklickt haben, dann dieses Ziel verwenden Sie den vorherigen Geschwister mit JQuery prev() Methode zu bekommen und es wechseln.

Im Code kann es so aussehen:

// 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 

dann wie folgt

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