JQuery Validation plugin with live click

Question

I have a website where the user can change the contents of the page using jquery load . In every content of the page, I have a form that I validate with the jquery validation plugin

  $("#form-create").validate({ submitHandler: function(form) { var name = $("#name").val(); save(name); return false; } }); 

I noticed that all jquery click functions only work until I change the content of the page, but I solved it with replacing click with live "click" . Although the same problem occurs with the above check. How does click work until I change the content of the page and live "click" solves the problem? OR how can I use the check plugin with live "click" , which will solve the problem but not explain it to me :)

Answer 1

The reason live click solves your problem is because the elements did not initially exist on your DOM, so using live means that it is a live click, even though it updates as new elements arrive in the DOM. By default, events use only the first loaded DOM.

If you want to validate using the live click event, you should use something like this:

 $('.submitButton').live("click", function() { $("#form-create").validate({ submitHandler: function(form) { var name = $("#name").val(); save(name); return false; } }); }); 

Hope this helps, it was a bit complicated, since you did not specify which validation plugin you are using, however, no matter which plugin should work if you want to trigger a check for an event that a submit button is clicked.

Answer 2

when you associate a collection of elements, such as $("div.clickable") , with an event, the collection is resolved using the DOM during the execution of the $ () function. All subsequent elements (appearing after this moment) will not be connected, because they do not belong to the original set

Live does just that: it updates the original set as a new element appears, then new elements bind as they appear in the DOM

Answer 3

Unfortunately, there is no loading event in real time, although this has been set for some time.

You can get around this by putting a callback function in your ajax calls. This can be done globally using the global ajax event handlers :

 $('#contentDiv').ajaxComplete(function() { $("#form-create").validate(validateOptions); });