jQuery détecter les changements de formulaire

Question

J'espère obtenir un peu d'aide de votre part. Je utilise ce script pour détecter si un formulaire a été modifié ou non. Si oui, lorsque je clique sur un lien href avec une certaine classe, une fenêtre de confirmation apparaîtra.

var formChanged = false; 

$(document).ready(function() { 

$('#my_form input[type=text].editable, #my_form textarea.editable').each(function (i) { 
    $(this).data('initial_value', $(this).val()); 
}); 

$('#my_form input[type=text].editable, #my_form textarea.editable').keyup(function() { 
    if ($(this).val() != $(this).data('initial_value')) { 
     handleFormChanged(); 
} 
}); 

$('#my_form .editable').bind('change paste', function() { 
    handleFormChanged(); 
}); 

$('.navigation_link').bind("click", function() { 
    return confirmNavigation(); 
}); 
}); 

function handleFormChanged() { 
$('#save_or_update').removeAttr('disabled'); 
formChanged = true; 
} 

function confirmNavigation() { 
if (formChanged) { 
     return confirm('Are you sure? Your changes will be lost!'); 
} else { 
     return true; 
} 
} 

Tout fonctionne très bien, sauf quand j'ai un lien inséré dans un div sur un ButtonClick avec jQuery comme celui-ci (en faisant le lien « visible »):

$("button").click(function() { 
    var dylink = "<a href='#' class='navigation_link'>dynammic link</a>"; 
    $("#tester").html(dylink); 
}); 

la fenêtre de confirmation ne le fait pas pop-up si je modifie le formulaire, puis cliquez sur le "lien dynamique". L'autre lien fonctionne parfaitement. Avez-vous des idées de ce que ça pourrait être?

Ce code html

<div><button>Show link</button></div> 
<div id="tester"></div> 
<div><a href="#" class="navigation_link">permanent link</a></div> 
<form action="" method="get" id="my_form"> 
<input type="text" class="editable"> 
<input type="button" name="button" id="save_or_update" value="Submit" disabled="disabled" /> 
</form> 

Merci /A

Answer 1

D'autres réponses ont fait allusion à cela, mais explicitement, voici ce qu'il faut faire.

Modifier ceci:

$('.navigation_link').bind("click", function() { 
    return confirmNavigation(); 
}); 
}); 

à ceci:

$('.navigation_link').live("click", function() { 
    return confirmNavigation(); 
}); 
}); 

Answer 2

$("button").live("click",function() { 
    var dylink = "<a href='#' class='navigation_link'>dynammic link</a>"; 
    $("#tester").html(dylink); 
}); 

Answer 3

de modification objet innerHTML (qui est ce qui se passe lorsque vous utilisez .html(...)) peut forcer le navigateur à recréer les quelques objets. Les objets nouvellement créés peuvent ne pas être liés à vos écouteurs d'événement. Par conséquent, vous devez envisager d'utiliser au lieu de .bind(...) pour tous les événements . Voir la documentation de jQuery au .live pour plus d'informations.