jquery - 如何编辑使用 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 模板的代码片段

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

如您所见，现在的问题是 UI 中的提交按钮。使用该提交按钮，我必须将该特定块（问题）的更新数据发布到服务器。如何确定按下了哪个提交按钮，以及如何获取仅与该特定提交按钮相关的文本框/下拉列表的数据？

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

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

Answer 2

给你所有的提交按钮一个类

<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 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>