如何以重复形式触发文件输入

Question

我有一个带有动态重复表单的 div，可以根据各自的 id 更改重复 div 的图像，当单击 div 图像时，我想触发单击 div 的文件输入。 内容通过 jquery post request 加载到 div(image-container) 中。

HTML

<div id="image-container"></div>

//repating dynamic form
<?php while($row=mysqli_fetch_assoc($result)):?>

<div class="image">
    <form name="image_change">
        <img src=".." class="image_change"/>
        <input name="image" type="file" />
        <input name="id" type="hidden" />
        <input name="edit" type="submit" />
    </form>
</div>

<?php endwhile;?>

jQuery

$('#image-container').on('click', 'form[name=image_change] .image_change', function(){
    $(this).find('input[name=image]').trigger('click');
    return false;
});

这仅在表单不重复时有效，我怎样才能使其与重复表单一起工作。

请查看并提出任何可行的方法。

谢谢。

Answer 1

这是因为您有多个具有相同名称的表单，并且只有第一个被识别。

从表单中移除名称属性：

<div class="image">
    <form>
        <img src=".." class="image_change"/>
        <input name="image" type="file" />
        <input name="id" type="hidden" />
        <input name="edit" type="submit" />
    </form>
</div>

并修改js代码如下

$(document).on('click', 'form .image_change', function(){
    $(this).parent().find('input[name=image]').trigger('click');
    return false;
});

如果您需要区分表单，请在表单中添加 id。