Question

I’ve been beating my head against the wall trying to get this to work, and I feel like I’m missing something simple.

I have a list of DIVs. Inside each div is a text input. I’m getting the variables from each input, and just want to append it to the end of the div.

Works as expected using a click event, but I want it to append when the page LOADS. 🙁

Here is my code:

$('.myDiv').click(function (){
    var t = $('input:text', this).val();
    $(this).append(t);
});

How do I get this to append on page ready or load? Thanks!

Answer 1

Just add .click() to the end:

$(function() {
    $('.myDiv').click(function (){
        var t = $('input:text', this).val();
        $(this).append(t);
    }).click();
     //  ^----------invoke the handler on each <div> on page load
});

Or if you meant just on page load, without the handler, use the each()^[docs] method to iterate over the elements, running the code:

$(function() {
    $('.myDiv').each(function (){
        var t = $('input:text', this).val();
        $(this).append(t);
    });
});

Or even a little shorter like this if you’re using jQuery 1.4 or later:

$(function() {
    $('.myDiv').append(function (){
        return $('input:text', this).val();
    });
});