jQuery标签- jQuery脚本只适用于第一个标签-坏初始化


jQuery Tabs - jquery script only works for 1st tab - bad initialize?

我有一个jQuery制表符,其中每个制表符和相应的内容都由PHP foreach循环填充。

对于每个标签,用户可以上传一张图片。我有这样的设置,一旦用户选择一个文件,一个jquery脚本使上传自动开始——浏览按钮被隐藏,并被"上传你的图片"取代。

下面是代码(CI标记):
<ul class="tab_header">
    <?php foreach ($p as $row):
        echo '<li>
            <a href="#tabs-'. $row->p_id . '">' . $row->p_name . '</a>
               </li>'; 
        endforeach; ?>
</ul>
<?php foreach ($p as $row): ?>
    <div id="tabs-<?php echo $row->p_id; ?>">
        <?php echo form_open_multipart('/p/p_upload_picture/' . $row->p_id, 'id="upload_form"');
        echo form_upload('userfile', '', 'id="file_select"');
        echo form_hidden('upload','upload');
        echo form_close(); ?>
         <div id="loading" style="display:none;">
            Uploading your picture...
         </div>     
</div>
<?php endforeach; ?>
<script>
$(function(){
    $("#file_select").change(function(){
        $("#upload_form").submit();
        $("#upload_form_div").hide();
        $("#loading").show();
    });
});
</script>   

这只适用于第一个选项卡。

在所有其他选项卡中,jquery脚本不会运行——只要我选择一个文件,文件名就会显示在浏览按钮字段中,而不会发生上传(表单没有提交)。

我想知道这是否与脚本没有为其他选项卡初始化有关。

我该如何解决这个问题?

谢谢你的帮助,非常感谢。

字段有一个id。应该是每个元素唯一的

jQuery只返回它遇到的第一个具有给定id的元素,这就是为什么你的代码不能工作。我建议在字段中添加一个类而不是id。

$('.class-of-field')..change(function() {
    ..
});

以上应该可以完成工作。

这是没有jQuery的等效代码:

var el = document.getElementById('file_select');

只返回一个元素,请查看文档