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

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：

我使用下面的 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 模板的 sn-p 代码

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()。捕获点击事件后，使用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>