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

ボタン要素が動的に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 に答える
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 に答える
0

既存のプラグインを使用する方がはるかに簡単ではないでしょうか?

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

ちょっとしたコード (delegateドキュメントのオプションを参照):

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

a を a に変更し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>
于 2012-07-10T21:41:09.080 に答える