Je ne peux pas obtenir 'return false' pour empêcher .live() de répéter la propagation du code

Question

Je veux que ceci soit configuré de sorte que lorsqu'un certain corps de texte est cliqué, un champ de saisie de texte apparaisse, et l'utilisateur pouvez entrer des données dans le champ, puis cliquez sur un bouton «enregistrer» ou «annuler» et soit l'envoyer à la base de données ou réinitialiser la valeur, respectivement. Cependant, malgré l'utilisation de 'return false', je n'arrive pas à empêcher l'activation répétée de ce code. J'ai utilisé die() et cela fonctionne, mais je veux aussi pouvoir rétablir l'événement click original après que l'utilisateur ait sauvegardé ou annulé, et ne puisse pas penser à un moyen de le faire fonctionner. Merci d'avance pour l'aide.

$('td[name]').live("click", function() { 
    nameof = $(this).attr("name"); 
    idof = $(this).attr("id"); 
    valueof = $(this).html(); 

    $(this).html('<input type="text" name="' + nameof + '" value="' + valueof + '"><input type="hidden" name="id" value="' + idof + '"><span id="save">save</span> &nbsp <span id="cancel">cancel</span>'); 

    return false; 
}); 

Mise à jour:

Voici ce que je me suis finalement venu avec (comprend toutes les modifier en place code):

$('td[name="grouping"] span, td[name="title"] span').live('click', function() {   
    nameof = $(this).parent().attr("name"); 
    idof = $(this).parent().attr("id"); 
    valueof = $(this).html(); 

    if($("table td>span").children('input').length > 0) {} 
    else { 
     if($(this).children().length > 0) {} 
     else { 
      $(this).html('<input type="text" name="' + nameof + '" value="' + valueof + '"><input type="hidden" name="id" value="' + idof + '"><input type="hidden" name="originalinput" value="' + valueof + '"><span class="save">save</span> &nbsp; <span class="cancel">cancel</span>'); 
     } 
    } 

}); 

$('.cancel').live('click', function() {   
    $(this).parent().html($(this).siblings('input[name="originalinput"]').attr("value")); 
}); 

$('.save').live('click', function() { 

    savevalue = $(this).siblings('input[type="text"]').attr("value"); 
    saveid = $(this).siblings('input[name="id"]').attr("value"); 
    savecolumn = $(this).siblings('input[type="text"]').attr("name"); 

    $.ajax({ 
     type: "POST", 
     url: "../php/adminajax.php", 
     data: 'id=' + saveid + '&' + savecolumn + '=' + savevalue 
    }); 

    $(this).parent().html(savevalue); 
}); 

$('#saving').ajaxStart(function() { 
    $(this).fadeIn(100); 
}); 

$('#saving').ajaxStop(function() { 
    $(this).fadeOut(2000); 
}); 

Je suis sûr que c'est beaucoup plus malpropre que tout ce que je pouvais » J'ai téléchargé, mais au moins je connais les bases d'un montage sur place AJAX maintenant. Merci pour l'aide tous.

Answer 1

On dirait que vous essayez essentiellement de faire un accord d'édition sur place. Le problème que vous rencontrez est que le clic de l'utilisateur est propagé à travers la zone de texte/retour à son conteneur parent, déclenchant ainsi à nouveau l'événement click. Vous devez le filtrer afin qu'il ne sélectionne pas td qui ont l'entrée dans son contenu. Quelque chose le long des lignes de ce:

$('td[name]:not(td>input)').live(...); 

Bien que pas une réponse directe à ce que vous cherchez pourquoi ne pas utiliser un plugin existant comme un found here?