2

我有几个在文件上传后动态生成的 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);
}

我正在尝试用一些文本填写替代文本输入字段，然后在单击提交按钮时，它通过 ajax 将命令发送到数据库，并在数据库中更新 image_id 匹配的替代文本字段。

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

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

这是我目前拥有 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);
            }
        });
    });

我会很感激任何帮助。一整天都被困在这个问题上：/

4

4 回答 4

2

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

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

虽然很有趣...您正在选择一个按钮，但您的按钮实际上是 type=submit 的输入。这个点击事件是否有效？

于 2012-07-10T21:25:03.710 回答
1

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

编辑：

您实际上并不需要知道您在哪个 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/

于 2012-07-10T21:24:34.880 回答
1

如果按钮元素是动态添加到 DOM 中的，你应该委托按钮的点击事件，试试这个：

$("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);
            }
        });
    });
于 2012-07-10T21:26:58.890 回答
0

使用现有插件不是更简单吗？

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

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

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

我将 a 更改div为 a 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>
于 2012-07-10T21:41:09.080 回答