Question

在我的应用程序的顶部，用户可以选择他们的选项和答案，然后他们可以将他们的选项和答案存储在新的表格行中。

我的问题是如何让每一行执行与上述选项和答案功能相同的功能，以便如果用户改变他们改变选项或在特定行中回答的想法，他们可以更改它在行内。

我的代码在JSFiddle。如果您希望能够使用小提琴中的选项和答案功能，请按照以下步骤操作。

打开网格并选择选项“3”。文本框中显示“3”，下面显示按钮A至C.
在“答案数”文本框中键入数字2。这意味着在按钮A至C之间只能选择2个按钮。
选择按钮A和B，如果您尝试选择另一个按钮，则会出现一条警告，说明您已超出限制。
点击“添加问题”按钮，系统会创建一行显示您的详细信息。

我希望每列中的所有功能都与顶部的选项和答案功能相匹配。我知道我需要使用.on()函数，但是如何在每一行中包含它？

Answer 1

如果我理解正确，你想知道如何重复步骤“3”中关于表行的“警告”..

然后你是对的 - “开”是你想要的功能。（此函数弃用live function） “on”的作用是在每个事件上重新评估选择器。

而不是在

中分配“onclick”事件

<input class="answerBtns" name="answerAName" id="answerA" type="button" value="A" onclick="btnclick(this);"/>

你应该写下面的

$(".answerBtns").on("click",btnclick);

这将有效地绑定此页面具有或将具有的每个“.answerBtns”元素的“btnclick”方法（现在和将来） - 因为选择器$（“。answerBtns”）将在每次单击时重新评估。

现在剩下的就是概括“btnclick”功能以支持所有场景。这意味着它必须确定它是在一行还是在形式中并且表现得恰当。

例如（未经检查，但不是伪代码）：

<script>
  function btnclick(){
      if ( $(this).closest("#qandatbl").length > 0 ) {  // we are in the table because we are wrapped in a table
           var myRow = $(this).closest("tr");
           var ourLimit = myRow.find(".numberAnswerTxtRow").val();
           if ( myRow.find(".answerBtnsOn").length > ourLimit ){
                 alert("...");... 
           }
      }else{...} // we are not in a table.. lets do what we always did. 
  }
</script>

正如您所看到的，我使用了closest和find因为它们给了我相同的功能，但只相对于点击原点。

如果我错过了某些内容，请告诉我，我会添加它。

如何使用.on（）函数来处理这种情况

1 个答案: