Ready as second eventType

Question

I currently have a program where if I change settings on the left it automatically changes on the right. So you have a preview what you are doing.

The text will automatically show on each keyup. So while you are typing you see a preview how it's going to look.

I currently call my Javascript functions like this.

"#chapter_form_number" is then the ID of the form input.

$("#chapter_form_number").bind("mouseup" , {key: 'chapter_display_number'} ,    chapter_generate_num);
$("#chapter_form_title").bind("keyup" , {key: 'chapter_display_title'} ,    generate_text);

// Number gen Chapter
function chapter_generate_num(dest){
    var dest = dest.data.key;
    var number = $(this);   
    $("#" + dest).html(number.val());
}

// change text
function generate_text(dest){
    var text = $(this); 
    var dest = dest.data.key;
    $("#" + dest).html(text.val());
}

But it only changed when I keyup or mouseup on a input. I would like that it would also change once when it loads. So it loads the input at least once. So I tried to put ready in the eventType but that is not working.

Any suggestions to solve this problem?

$("#chapter_form_number").bind( "mouseup ready" , {key: 'chapter_display_number'} ,     chapter_generate_num);
$("#chapter_form_title").bind("keyup ready" ,   {key: 'chapter_display_title'} ,    generate_text);

Answer 1

Use .trigger( eventType [, extraParameters ] )

$("#chapter_form_number")
    .bind("mouseup" , {key: 'chapter_display_number'}, chapter_generate_num)
    .trigger("mouseup");
$("#chapter_form_title")
    .bind("keyup" , {key: 'chapter_display_title'}, generate_text)
    .trigger("keyup");