JQuery form changes

Question

Hope to help you guys a little.

Im using this script when detecting a form change or not. If so, when I click the href link with a specific class, a confirmation window will appear.

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 when I have a link inserted into a div on a buttonclick button with jQuery like this (making the link "visible"):

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

a confirmation window does not appear if I edit the form, and then click "dynamic link". Another link works fine. Any idea what this 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

Other answers hinted at this, but obviously, here's what to do.

Change this:

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

:

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

Answer 2

Changing the innerHTML object (which happens when using .html(...) ) can cause the browser to recreate some objects. Newly created objects may not have events associated with event listeners. Therefore, you should use .live(...) instead of .bind(...) for all change events. See the jQuery documentation on .live for more .live .

Answer 3

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