jQuery detect form changes

Question

Hello everybody!

Hope to get a little help from you guys.

Im using this script when detecting if a form has changed or not. If so, when I click a href link with a certain class a confirm window will popup.

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

Everything works fine, except for when i have a link inserted into a div on a buttonclick with jQuery like this (making the link "visible"):

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

the confirm window does not pop up if I edit the form and then click the "dynamic link". The other link works perfect. Any idea what it could be?

This is the html code

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

Thanks /A

Answer 1

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

Answer 2

Changing object's innerHTML (which is what happens when you use .html(...)) may force the browser to recreate the some objects. The newly created objects may not have your event listeners bound. Therefore you should consider using .live(...) instead of .bind(...) for all the change events. See jQuery documentation on .live for more information.

Answer 3

Other answers hinted at it, but explicitly, here's what to do.

Change this:

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

to this:

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

Answer 4

hi,nice script can u plz tell how to implement with other form tag like radio and also with file upload

have Dream day