Question

我在运行时使用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：

enter image description here

我使用以下jQuery代码创建了上面的UI：

<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中的提交按钮。使用该提交按钮，我必须将该特定块（问题）的更新数据发布到服务器。如何识别按下了哪个提交按钮？如何获取仅与该特定提交按钮相关的文本框/下拉列表的数据？

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

Answer 2

对于委派的事件处理程序（用于在脚本执行时绑定到不在DOM中的元素），使用.on()。找到click事件后，使用jQuery DOM traversal方法查找相关节点并获取其值。

在这种情况下，我建议使用.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'行中，您可以将document替换为任何jQuery选择器，但它只会在调用时与DOM中的元素匹配;您应该将document替换为要添加所有解决方案块的静态父节点，因为这意味着事件不必一直传播到根节点，这将产生更好的性能。

有关详细信息，请参阅.on()的文档。

Answer 3

虽然Rahul和nbrooks的答案也能够达到要求，但这是我已经用来实现理想事物的另一种方法。

我添加了数据标记

$('.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>

如何编辑使用jquery模板引擎生成的特定div的数据？

3 个答案: