jQuery trigger('click') not working with Jasmine-jquery

Question

This is my test code:

describe("Login", function(){
    beforeEach(function(){
        loadFixtures('login-fixture.html');
    })

    it("should enable the button when checking 'remember password'", function(){
        $('#remember').trigger('click');
        expect($('#keepIn')).not.toBeDisabled();
    });
});

And this is my production code:

$(document).ready(function(){

    $('#remember').click(function(e) {
        if($('#remember').is(':checked'))
        {
            $('#keepIn').removeAttr('disabled');
        }
    });

});

This is not working, the production code never gets called. I have put alerts before and after the trigger event and after the trigger the checkbox is checked, but the .click function does not get called.

Any thoughts on why is this happening?

Resource

Where does that ".checkboxradio" thing come from? – Sob

what errors are thrown in console? – Stannic

@Sob It's jQuery-mobile. Anyways i've changed the code to do it just with jQuery – Resource

@Stannic No errors in console just the test doesn't pass. I've seen that doesn't get called debugging it with firebug – Resource

Answer 1

Without seeing the rest of the code, I'm assuming the "login-fixture.html" contains the "#remember" checkbox. If so, it's loading after the DOM loads. Meaning that the 'click' event you want assigned will only apply to previously loaded elements. The jQuery on() event will assign any event you want to newly loaded elements. You might want to try adding a on() event to that id. Something like:

$(function(){
    $('#remember').on('click', function(){
        if($('#remember').is(':checked')){
            $('#keepIn').checkboxradio('enable');
        }
    });
});

Hope that helps.

See: http://api.jquery.com/on/

Hinkle

@OptimusCrime: .on method is causing the same issue, while .live method works fine for me (i'm using the latest jQuery version) – Resource

That is really weird. live only points towards the on-function in the latest version as far as I know. – Fsh

Yep, thank you I have been looking for this for weeks now! .live worked for me when .on and .delegate did not. – Maize

But what I'd really like to do is change the testing framework so that it pulls in my fixtures before it run the functions that are to be run on Document.ready – Maize

@Resource as far as I understand .live works as it always bubbles all the way up to the document and hence it works. With .on method you have to specify how far it bubbles. I believe this is main reason why .live is being depreceated – Broughton

It still doesn't work for me. I tried that on the chrome console and it works. I am just updating the class div on click. Works fine on chrome console but doesn't work jasmine jquery. – Stilliform