CODEWITHSUNDEEP
javascriptjqueryajax
Walter White
Walter White

Reputation: 369

Triggers doesn't work on content loaded via ajax

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

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

instead of this:

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

I did that because I am manipulating DOM and after load content via ajax all functions ceased to operate. Now they work half because triggers doesn't do they job. All below code is added to page index.php. In this page I have div #content and I am reloading its contents via ajax. All of the following functions pertain to only that div. My question is how to create proper triggers for this functions?

One more question: is that proper 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 content of 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);
});

Upvotes: 5

Views: 2315

Answers (4)

Walter White
Walter White

Reputation: 369

Thank you all for your attention.

Finally with your help I've found the soluton!

After suggestions from @peterpeterson and @jAndy I came up with a great idea. I was replace $(document).ready(function() { to function readydoc () and I'm calling 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 was put the trigger function before close tag of 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 work's just perfect. Thank you.

Upvotes: 0

peterpeterson
peterpeterson

Reputation: 1325

This happens because the new elements are not related to any event. As they are just being loaded.

A quick fix would be to trigger document.ready on the else just after you load the content.

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

A better solution is to, create a function, let 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();
    }

Upvotes: 0

frogcoder
frogcoder

Reputation: 354

Try this idea, I hope this will help 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>

Upvotes: 1

jAndy
jAndy

Reputation: 236092

You're trying to .trigger() events on Elements, which don't have any direct event handler. Since you are using event delegation, you have to .trigger() the event on the Element itself, in this case, the element with the id of #type_of, #order_form and all other Elements which events you're handling on your Document Node.

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

Upvotes: 1

Related Questions