Jquery .on() method not working on dynamic content

A page that executes javascript every time an input field it checked and also load new data thru ajax.

My jquery selector

$(".te_multiselect_checkbox").on("change", function( e ) {} 

was not working on the new content. When I ran $(‘.te_multiselect_checkbox’) in the console before the new content was retrieve I would get http://x-v.it/uploads/capit/ge/n3/8y.jpg but after the new content was loaded I got

http://x-v.it/uploads/capit/4q/7x/s1.jpg
(x.fn.x.init)
I dont know if this happens because the page was architect to do so or javascript is doing it.

What I learned is the selector is not getting the new content change the selector to

$(document.body).on('change', '.te_multiselect_checkbox', function( e ) {}

Here is the explanation:
http://stackoverflow.com/questions/15090942/jquery-on-method-not-working-on-dynamic-content
http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements

tags:
jquery maintain selector when new ajax content
jquery get by class more than 100

jQuery Deferreds

Just some examples that were useful to me


http://x-v.it/gdfug8

var myVar  = 1;
function test(){
    var deferred = new $.Deferred();
    setTimeout(function(){
        myVar = 2;
        deferred.resolve();
    },2000);
    
    return deferred; //or return deferred.promise()
}

test().done(function(){
    console.log(myVar);  //should execute after the call below
})

console.log(myVar); //should be one because this is excuded first ever though it after the above call
 

$.get( "includes/cifras.html", function( data ) {
    $( "#songs" ).html( data );
}).done( function(){
            var songs = new Array();
            $('.first_line').each(function(i){
                songs[i] = {}
                songs[i]['html'] = $(this).html();
                songs[i]['id'] = i;
            });

            songs.reverse();
            $.each( songs, function( key, value ) {
                $('#list').append('
' + value['html'] + '

'); }); $('.cifra').click(function(){ $('#stand').html($('.cifra-mono').eq(this.id).html()); $('#list').css('display','none'); $(".back").css('display','block'); }); }); $( ".back" ).click(function() { $('#stand').html(''); $('#list').css('display','block'); $(".back").css('display','none'); });

>Chrome is Pissing me Off

>I’ve been programming lately and this week I had Google Chrome web browser not work correctly. I was using jQuery JSON and AJAX, and tried to view a webpage source and these three instances didn’t work in Chrome but worked perfectly in Firefox. I don’t know if the issue is because I’m using it natively on my desktop to test, I hope it is. Chrome is a good browser to surf the internet but not the best to test your code. Imagine the frustration of coming to a conclusion that a code doesn’t work but later finding out it works because chrome doesn’t work when using local files. That’s a bunch a BS.

I would say “I hope they fix that” but I’m going to do what I can control. I’m switching to Firefox.

>jQuery AJAX .load()

>jQuery AJAX is wonderfully powerfull. The more I use it the more I like it. Its very simple compared to the pure AJAX javascript code. jQuery has a couple of different AJAX syntax but the simplest is the .load(). Choose which element you want to target and which location/file you want to pull content from. Barabam AJAX.

Example:

$(‘div’).load(‘test.html’);

Above changes the div tag in current page to the test.html

One cool feature is the ability to pull a selected portion of the location by having a space after the location name and specifying the part.

Example:

$(‘div’).load(‘test.html #content’);

Above changes the div tag in current page to the test.html where the id equals “content”

More information check .load() – jQuery API