Triggers do not work with content downloaded via ajax

Question

I have the following problem. I was forced to rewrite all of the following functions to create this:

$(document).on("change","#type_of",function(){

instead of this:

$('#type_of').on('change', function () {

I did this because I manipulate the DOM and after loading the contents through ajax all the functions stopped working. Now they work halfway because triggers don't do the job. All of the codes below are added to the index.php page. On this page, I have a div #content and I reload its contents via ajax. All of the following functions apply only to the div. My question is: how to create the right triggers for these functions?

One more question: is this the correct syntax in my case $(document).ready(function() { ?

 $(document).ready(function() { // ALSO SOME CODE HERE (variables and etc.) $(document).on("change","#type_of",function(){ // FUNCTION CODE }) $(document).on("change","#order_form",function(){ // FUNCTION CODE }) $( '#type_of, #orer_form' ).trigger( 'change' ); }) $(document).on("change","input[name=window-type]",function(){ // FUNCTION CODE } $(document).on("change","#shutter_type",function(){ // FUNCTION CODE }) $( '#shutter_type, #input[name=window-type]' ).trigger( 'change' ); 

Here is also one of my ajax calls that I use to reload the contents of a div #content

 function displayPhoto(photoid){ $.ajax({ url: "includes/displayphoto.php?photo_id="+photoid }).done(function(data) { if (data == false) { alert ("ERROR"); } else { $('#content').html(data); } }); } $(document).on("click",".photo-id",function(){ var photoid = $(this).data("photoid"); displayPhoto(photoid); }); 

Answer 1

Thank you all for your attention.

Finally, with your help, I found a soloton!

After suggestions from @peterpeterson and @jAndy, I came up with a great idea. I replaced $(document).ready(function() { with function readydoc () , and I call it after html(data) .

 function displayPhoto(photoid){ $.ajax({ url: "includes/displayphoto.php?photo_id="+photoid }).done(function(data) { if (data == false) { alert ("ERROR."); } else { $('#content').html(data); readydoc(); } }); } 

Then I placed the trigger function before the closing tag function readydoc ()

 function readydoc () // ALSO SOME CODE HERE (variables and etc.) $(document).on("change","#type_of",function(){ // FUNCTION CODE }) $(document).on("change","#order_form",function(){ // FUNCTION CODE }) $( '#type_of, #orer_form, #shutter_type, input[name=window-type]' ).trigger( 'change' ); } $(document).on("change","input[name=window-type]",function(){ // FUNCTION CODE } $(document).on("change","#shutter_type",function(){ // FUNCTION CODE }) 

And it works just fine. Thanks.

Answer 2

You are trying to execute .trigger() events in Elements that have no direct event handler. Since you are using event delegation, you must have an .trigger() event for the Element itself, in this case an element with the identifier #type_of , #order_form and all other elements, events that you process in your Node document.

 $( '#type_of, #orer_form' ).trigger( 'change' ); 

Answer 3

Try this idea, I hope this helps you.

 $(document).on("change","#select1",function(){ //ajax request here that can pass to the params $("#test").trigger('click',[$(this).val()]); }); $(document).on("click","#test",function( event, param1 ) { //ajax request here $("#result").html(param1); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" id="test" style="display:none;">trigger</a> <select id="select1"> <option>1</option> <option>2</option> </select> <div id="result"> </div> 

Answer 4

This is because new elements are not associated with any event. Because they are only loading.

A quick fix will initiate document.ready on another immediately after loading the contents.

  else { $('#content').html(data); $(document).trigger('ready'); } 

The best solution is to create a function, say, "bind"

 function bind(){ //All on... must go here. $(document).off("change","input[name=window-type]"); $(document).on("change","input[name=window-type]",function(){ // FUNCTION CODE } //and on every time you load new data call it: else { $('#content').html(data); bind(); }