Question

这是我的第一个问题，但我已经发现这个网站非常有帮助，所以感谢你们所有人。

这就是问题所在。我有一堆动态生成的div与textareas，我想迭代。这个函数适用于我输入的静态测试div，但不适用于动态创建的静态测试div。

$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());
    });
});

这里是每个div的html：

<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>

修改

天哪，我觉得自己像个白痴。

我回头看了一下生成新div的脚本，看到我忘了给textareas分类......

无论如何，感谢所有的帮助。感谢所有快速答案！

Answer 1

像你正在做的那样调用.on()不会将事件绑定为活动事件（因为缺少可选的选择器参数），这意味着它只会绑定到执行时存在的元素。如果您更改了拨打.on()的方式，而是专门将点击绑定到body，则可以在#upload_images_button按钮上更改要生效的事件：

$jQ('body').on('click', '#upload_images_button', function() {} );

此外，我不确定您的网页上是否有多个#upload_images_button按钮，但请记住ID必须是唯一的，因此如果您确实拥有多个这些元素，请使用类来代替一个身份证。

Answer 2

代码工作正常。你的错误在别的地方。示例：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());
});

注意

不要使用document.write，如果在加载页面后调用，将覆盖文档中的所有内容

在动态生成的内容上调用jQuery .each（）

2 个答案: