Met à jour tout le texte et pas le texte sélectionné dans jQuery

Question

J'ai le code suivant iam essayant de rendre le texte div sous l'image éditable en utilisant le bouton et en utilisant .val() mais iam ayant un problème lorsque je clique sur une autre image et modifiez la zone de texte pour mettre à jour le nouveau texte d'image qu'ils ont tous changé.

$('.HeaderGifs').live('click', function() { 
var img_class = $(this).attr("class"); 
var img_src = this.src; 
    $('#img_prop').css("display","block"); 
    $('#pre_img').html("<img src='"+img_src+"'></img>"); 
    var image_sel_id = img_class.replace("HeaderGifs ", "") 
alert(image_sel_id); 

    $('#alt_text').keyup(function() { 

    var alt_text = $(this).val(); 

    $('#text_'+image_sel_id).text(alt_text); 

     }); 
}); 

Merci Vous

Answer 1

Le problème est à chaque clic vous lier une nouvelle keyup gestionnaire à #alt_text, si juste .unbind() le gestionnaire précédent, comme ceci:

$('#alt_text').unbind('keyup').keyup(function() { 
    $('#text_'+image_sel_id).text($(this).val()); 
}); 

Ou , un peu plus efficace, faites juste image_sel_id une variable qui change et lie le gestionnaire #alt_text une fois ... et ça pointera toujours vers le curre nt l'image:

var image_sel_id; 
$('.HeaderGifs').live('click', function() { 
    $('#img_prop').css("display","block"); 
    $('#pre_img').html("<img src='"+this.src+"'></img>"); 
    image_sel_id = this.className.replace("HeaderGifs ", "") 
}); 
$('#alt_text').keyup(function() { 
    if(!image_sel_id) return; //one hasn't been clicked yet 
    $('#text_'+image_sel_id).text($(this).val()); 
}); 

Notez le chèque dans le gestionnaire #alt_text, ceci est facultatif depuis #text_probablement ne trouverez rien, mais pourrait tout aussi bien économiser les coûts et ne pas courir le reste de la fonction du tout depuis une image n'a pas encore été cliquée.