CODEWITHSUNDEEP
jquery
spal
spal

Reputation: 771

$(document).ready not called after Ajax call

Here is my main page, when page loads, 'page1' is displayed automatically, whenever radio button is toggled 'div' contents are updated through ajax 

 <html>
   <input type="radio" name="radioOption" id="page1" checked="checked"/>
   <input type="radio" name="radioOption" id="page2"/>
   <div id="page1"><jsp:include page="page1"/></div>
   <div id="page2"></div>
</html>

Ajax call 

$(document).ready(function() {
   $('input:radio[name="radioOption"]').on("click", function(e) {
        $.ajax(url:"url", success:function(result){
           $("#page1").empty();
           $("#page2").html(result); 
        };)
    });
});

nothing special about page1 and page2, they are just forms with some inputs and submit button

<form name="someForm">
   <input type=text name="userName"/>
    <button type="submit" id="save-button"/> 
</form>

Have some form validations that are called onClick of submit button like shown below

$(document).ready(function() {
    $('#someForm').bind('submit', function(e) {
       someValidationFunctions(); 
 });

My issue is, these validations are called when the page first loads normally, they are not triggered after the ajax div calls, what am I missing, any inputs appreciated

Upvotes: 0

Views: 1786

Answers (1)

bipen
bipen

Reputation: 36551

use on for dynamically generated elements..

 $(document).on('submit','#someForm', function(e) {
   someValidationFunctions(); 
}

it is even better if you use static parent element rather than document itself (performancewise)..

which in your case is #page2 

 $('#page2').on('submit','#someForm', function(e) {
   someValidationFunctions(); 
}

Upvotes: 1

Related Questions