如何在这种情况下使用 .on() 函数

Question

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

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

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

1. 打开网格并选择选项“3”。 “3”显示在文本框中，按钮 A 到 C 显示在下面。

2. 在答案数文本框中输入数字 2。这意味着按钮 A 到 C 之间只能选择 2 个按钮。

3. 选择按钮 A 和 B，如果您尝试选择另一个按钮，则会出现警报，说明您超出限制。

4. 单击“添加问题”按钮，将创建一行显示您的详细信息。

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

Answer 1

如果我理解正确，您想知道如何在步骤“3”上重用关于表行的“警报”。

那么您是对的 - “on”是您想要的功能。 （此函数弃用了 live 函数 ）
“on”所做的是重新评估每个事件的选择器。

而不是在中分配“onclick”事件

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

您应该编写以下内容，

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

这将有效地将“btnclick”方法绑定到此页面具有或将具有（现在和将来）的每个“.answerBtns”元素上 - 因为选择器 $(".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 因为它们为我提供了相同的功能，但仅相对于点击原点。

如果我遗漏了什么，请告诉我，我会添加它。