5

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);
});
1
  • As i understand it, you are trying to trigger event on element added later in the DOM (so not in the DOM at time you want to trigger event manually). What do you expect it to do then??? Why don't you use instead referenced function as handler?
    – A. Wolff
    Feb 19, 2015 at 11:53

4 Answers 4

1

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' );
1
  • @jAndy I guess element not in the DOM when OP calls trigger. Then i don't really get the logic behind
    – A. Wolff
    Feb 19, 2015 at 11:54
1

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>

1
  • Unfortunately still nothing. Feb 19, 2015 at 11:52
0

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();
    }
1
  • I've tried with your 'better' solution but it's still don't trigger the functions. It's work because If I don't add bind() to else, I can't even manually call my functions. Anyway its still not triggering functions. Feb 19, 2015 at 12:20
0

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.