Question

我有几个在上传文件后动态生成的div。每个文件上传都会以这种格式创建一个div：

<div id="uploadifive-fileupload-queue" class="uploadifive-queue">
    <div class="uploadifive-queue-item complete" id="uploadifive-fileupload-file-0">

        <div class="inputs">

            <input type="hidden" name="image_id" value="0">
            <input type="text" name="alt-text">
            <input type="submit" name="image_data_submit" value="Submit" />

        </div>
    </div>
</div>

上传的每个项目都会将uploadifive-queue-item类的id增加到uploadifive-fileupload-file-0，uploadifive-fileupload-file-1，uploadifive-fileupload-file-2等。

我从响应中动态填充隐藏的image_id，因此每个隐藏的image_id字段将具有与我存储在数据库中的image_id相对应的不同数值。这看起来像：

'onUploadComplete'  : function(file, data) {    
     $('input[name=image_id]:last').val(data);
}

我试图用一些文本填写alt-text输入字段，然后在单击Submit按钮时，它通过ajax将命令发送到数据库，在那里它更新data_id数据库中的alt-text字段匹配。

问题是我无法弄清楚如何使提交按钮仅提交同一div容器中的image_id和alt-text。每个div都有一个带有递增数字的唯一ID，但我不知道如何选择它。我该怎么办？

基本上，如果提交uploadifive-fileupload-file-3中的按钮，我只希望通过ajax提交uploadifive-fileupload-file-3中的image_id字段。

以下是我目前使用jQuery ajax的方法：

$("button[name=image_data_submit]").click(function(){
        $.ajax({
            url: './update_image/',
            type: "POST",
            data: { 
                image_id: $("input[name=image_id]").val(), 
                alt_text: $("input[name=alt_texted]").val() 
            },
            success: function(response){
                console.log(response);
            }
        });
    });

我很感激任何帮助。一直困在这一天：/

Answer 1

尝试根据点击元素的位置选择值。

$("button[name=image_data_submit]").click(function(){
    var theDiv = $(this).closest(".uploadifive-queue");
    $.ajax({
        url: './update_image/',
        type: "POST",
        data: { 
            image_id: $("input[name=image_id]",theDiv).val(), 
            alt_text: $("input[name=alt_texted]",theDiv).val() 
        },
        success: function(response){
            console.log(response);
        }
    });
});

有趣的是......你正在选择一个按钮，但你的按钮实际上是一个输入类型=提交。此点击事件是否有效？

Answer 2

你的代码现在应该是这样的

已编辑：

你真的不需要知道你所在的div。你只需要通过提交按钮输入值。您也在选择"input[name=alt_texted]"输入错误的输入。它应该是input[name=alt-text]

$("input[name=image_data_submit]").click(function(){
    $.ajax({
        url: './update_image/',
        type: "POST",
        data: { 
            image_id: $(this).siblings("input[name=image_id]").val(), //<-- this = current element. then find sibling inputs
            alt_text: $(this).siblings("input[name=alt-text]").val() // <-- your alt_texted didn't match your html
        },
        success: function(response){
            console.log(response);
        }
    });
});

http://jsfiddle.net/utJKU/7/

Answer 3

如果按钮元素动态添加到DOM，您应该委派按钮的click事件，试试这个：

$("body").on('click', 'input[name=image_data_submit]', function(e){
        e.preventDefault();
        $.ajax({
            url: './update_image/',
            type: "POST",
            data: { 
                image_id: $(this).parent().find("input[name=image_id]").val(), 
                alt_text: $(this).parent().find("input[name=alt_texted]").val() 
            },
            success: function(response){
                console.log(response);
            }
        });
    });

Answer 4

使用现有的插件会不会更简单？

http://jquery.malsup.com/form/

一些小代码（请参阅文档中的delegate选项）：

$(function(){
    $('form').ajaxForm(...);
});

我将div更改为form（您必须设置其属性）：

<form class="uploadifive-queue-item complete" id="uploadifive-fileupload-file-0"
      action="./update_image/" method="POST">
    <div class="inputs">
        <input type="hidden" name="image_id" value="0">
        <input type="text" name="alt-text">
        <input type="submit" name="image_data_submit" value="Submit" />
    </div>
</form>

选择器仅用于包含div的元素

4 个答案: