Question

This is my first question, but I’ve already found this site extremely helpful, so thanks to all of you.

So this is the problem. I have a bunch of dynamically generated divs with textareas that I’d like to iterate through. This function here works on the static test divs that I put in, but not on the dynamically created ones.

$jQ('#upload_images_button').on('click', function() {
    var caption_list = [];

    $jQ('textarea.upload_image_caption').each(

    function() {
        caption_list.push($jQ(this).val());
        document.write($jQ(this).val());
    });
});

And here’s the html for each of those divs:

<div class="upload_image_temp_wrapper">                                 
    <div class="upload_wrapper">
        <img src="/images/test/test.jpg" />

        <div class="temp_image_hover_menu">
            <input type="checkbox" checked="checked" />
        </div>
    </div>
    <div class="upload_image_caption_wrapper">
        <textarea class="upload_image_caption" type="text" placeholder="Add a description..."></textarea>
    </div>
</div>

EDIT

Goodness, I feel like an idiot.

I looked back at the script that was generating the new divs and saw that I forget to assign the textareas a class…

Anyway, thanks for all the help. Appreciate all the quick answers!

Answer 1

The code works fine. Your error is somewhere else. Example: http://jsfiddle.net/Buaja/

HTML

<button id="upload_images_button">Upload</button>
<button id="add-div">Add Div</button>

<div class="upload_image_temp_wrapper">                        
    <div class="upload_wrapper">
        <img src="/images/test/test.jpg" />

        <div class="temp_image_hover_menu">
            <input type="checkbox" checked="checked" />
        </div>
    </div>
    <div class="upload_image_caption_wrapper">
        <textarea class="upload_image_caption" type="text" placeholder="Add a description..."></textarea>
    </div>
</div>​

JS

$jQ('#upload_images_button').on('click',
    function(){
        var caption_list = [];

        $jQ('textarea.upload_image_caption').each(
            function(){
                caption_list.push($jQ(this).val());
                console.log($jQ(this).val());
            });     
    }
);

// Add divs dynamically
$jQ('#add-div').on('click', function() {
   $jQ(document.body).append($jQ($jQ(".upload_image_temp_wrapper")[0]).clone());
});

Note

• Don’t use document.write, that will overwrite everything in the document if called after the page is loaded