0

実行時に HTTP POST リクエストを使用して、次の JSON を取得しています。

{"d": {"Result":"OK","Records": [{
   "Id":1,
   "QText":"Explain marketing and the usage of Marketing in short",
   "AText":"demo answer",
   "Marks":11,
   "Comment":"no comments"
}, {
   "Id":14,
   "QText":"How Marketing affects SCM",
   "AText":"hi",
   "Marks":10,
   "Comment":"No comments"
}, {
   "Id":15,
   "QText":"Explain Marketing Tools",
   "AText":"ans 3",
   "Marks":8,
   "Comment":"No comments"
}, {
   "Id":16,
   "QText":"Pls answer this question",
   "AText":"ans 4",
   "Marks":0,
   "Comment":"poor"
}]}}

jQuery テンプレート プラグインを使用して、次のタイプの UI を生成しました。

ここに画像の説明を入力

上記の UI を作成するために、次の jQuery コードを使用しました。

<script id="solutionTemplate" type="text/x-jQuery-tmpl">
    <div class="filtering">
        <h2> Question </h2>
        <div> ${QText} </div><br/>
        <h2> Answer </h2>
        <div> ${AText}</div><br/>
        <table><tr><td>
        <h2> Marks </h2>
        <div> 
           <select id="ddlMarks-${Id}">
              <option value="11" ${IsSelected(Marks,11)}>Not Checked</option>
              <option value="0" ${IsSelected(Marks,0)}> Zero </option>
              <option value="1" ${IsSelected(Marks,1)}> One </option>
              <option value="2" ${IsSelected(Marks,2)}> Two </option>
              <option value="3" ${IsSelected(Marks,3)}> Three </option>
              <option value="4" ${IsSelected(Marks,4)}> Four </option>
              <option value="5" ${IsSelected(Marks,5)}> Five </option>
              <option value="6" ${IsSelected(Marks,6)}> Six </option>
              <option value="7" ${IsSelected(Marks,7)}> Seven </option>
              <option value="8" ${IsSelected(Marks,8)}> Eight </option>
              <option value="9" ${IsSelected(Marks,9)}> Nine </option>
              <option value="10" ${IsSelected(Marks,10)}> Ten </option> 
           </select>
        </div></td>
        <td><h2> Comments </h2>
        <textarea id="textarea-${Id}" cols="120" rows="1"> ${Comment} </textarea>
        </td>
        <td><br/><input type="button" id="btn-${Id}" value="Submit"/></td>
        </tr></table>
    </div>
</script>

フェッチされたデータを jQuery テンプレートにバインドするために使用される別のコード スニペットを次に示します。

if (response.d['Result'] == 'OK') {
   var solutionList = response.d['Records'];
   $('#solutionTemplate').tmpl(solutionList).appendTo('#divAnswers');
}

ご覧のとおり、問題は UI の送信ボタンです。その送信ボタンを使用して、その特定のブロック (質問) の更新されたデータをサーバーに投稿する必要があります。どの送信ボタンが押されたかを特定するにはどうすればよいですか?また、その特定の送信ボタンにのみ関連するテキストボックス/ドロップダウンのデータを取得するにはどうすればよいですか?

4

3 に答える 3

1

委任されたイベント ハンドラー (スクリプトの実行時に DOM にない要素にバインドするため) には、 を使用します.on()。クリック イベントをキャッチしたら、jQuery DOM トラバーサルメソッドを使用して関連するノードを見つけ、その値を取得します。

この場合、 を使用.closest()して更新されたブロック ( <div class="filtering">) のトップ レベルに移動し、そこから を使用して関連する更新されたノードを見つけることをお勧めし.find()ます。このようなものはあなたが望むものです:

$(document).ready(function() {
    $(document).on('click', 'input[value="Submit"]', function() {

        var $updatedBlock = $(this).closest('.filtering');

        var comments = $updatedBlock.find('textarea').val();
        alert( comments );

        var marks = $updatedBlock.find('select').val();
        alert( marks );

        // make ajax request with updated data
    });
});

この$(document).on('click'行では、任意の jQuery セレクターに置き換えることができますが、呼び出し時に DOM 内のdocument要素にのみ一致することに注意してください。すべてのソリューション ブロックを追加する静的な親ノードに置き換える必要があります。これは、イベントがルート ノードまで伝播する必要がないことを意味し、パフォーマンスが向上するためです。document

詳細については、ドキュメントを参照し.on()てください。

于 2012-08-18T06:56:06.410 に答える
1

すべての送信ボタンにクラスを与える

<input type="button" id="btn-${Id}" class="SubmitButton" value="Submit"/>

クリックイベントをバインドします 

   $('.SubmitButton').bind('click', function (e) {
    //e.target will give you what button is pressed
     alert(e.target);
     e.stopImmediatePropagation();
     });
于 2012-08-18T06:22:11.093 に答える
0

Rahul と nbrooks の答えも必要なものを達成することができますが、これは私がすでに望ましいことを達成するために使用した別の 3 番目のアプローチです。

データタグを追加しました

$('.btnSubmit').live('click', function (e) {
            //e.target will give you what button is pressed
            var id = $(e.target).attr('data-tag');
            e.stopImmediatePropagation();
            var strTextId = '#textarea-' + id;
            var strDDLId = '#ddlMarks-' + id;
            alert($(strTextId).val() + ' , ' + $(strDDLId).val());
            //SubmitRemarks(id,$(strTextId).val(), $(strDDLId).val());
        });

<script id="solutionTemplate" type="text/x-jQuery-tmpl">
    <div class="filtering">
        <h2> Question </h2>
        <div> ${QText} </div><br/>
        <h2> Answer </h2>
        <div> ${AText}</div><br/>
        <table><tr><td>
        <h2> Marks </h2>
        <div> 
           <select id="ddlMarks-${Id}">
              <option value="11" ${IsSelected(Marks,11)}>Not Checked</option>
              <option value="0" ${IsSelected(Marks,0)}> Zero </option>
              <option value="1" ${IsSelected(Marks,1)}> One </option>
              <option value="2" ${IsSelected(Marks,2)}> Two </option>
              <option value="3" ${IsSelected(Marks,3)}> Three </option>
              <option value="4" ${IsSelected(Marks,4)}> Four </option>
              <option value="5" ${IsSelected(Marks,5)}> Five </option>
              <option value="6" ${IsSelected(Marks,6)}> Six </option>
              <option value="7" ${IsSelected(Marks,7)}> Seven </option>
              <option value="8" ${IsSelected(Marks,8)}> Eight </option>
              <option value="9" ${IsSelected(Marks,9)}> Nine </option>
              <option value="10" ${IsSelected(Marks,10)}> Ten </option> 
           </select>
        </div></td>
        <td><h2> Comments </h2>
        <textarea id="textarea-${Id}" cols="120" rows="1"> ${Comment} </textarea>
        </td>
        <td><br/><input data-tag="${Id}" class="btnSubmit" type="button" id="btn-${Id}" value="Submit"/></td>
        </tr></table>
    </div>
</script>
于 2012-08-18T07:13:33.253 に答える