如何根据匹配模式创建jQuery click处理程序

Question

我有多个原因代码（对于ex：rc1，rc2 ...）。对于这些原因代码中的每一个，我想为用户提供一个可以输入一些注释的文本框。还可以选择为每个原因代码添加多个文本框。

要允许用户添加一个动态的文本框，我有一个按钮，该按钮允许用户这样做。如果只有一个原因代码，我可以很容易地只需将文本框附加到使用jQuery的预先存在的文本框上（使用类似的内容：jQuery将类添加到克隆元素中）。

但是，由于我有多个原因代码（超过200个），因此在jQuery中使用每个原因代码没有任何按钮。我有办法通过基本标识符搜索。

我粘贴了我的JSP文件生成的HTML文件的内容。

<div id="Reasoncode1">
  <div id="inputTextBox_Reasoncode1">
    <input type="text" placeholder="Add some text"/><button class="button_Reasoncode1">
   +</button>
  </div>   
</div>
<p>
Reason code2
</p>
<div id="Reasoncode2">
  <div id="inputTextBox_Reasoncode2">
    <input type="text" placeholder="Add some text"/><button class="button_Reasoncode2">
   +</button>
  </div>   
</div>

我的jQuery尝试是：

$(".button_Reasoncode1").click(function() {
     $('#Reasoncode1').clone().insertAfter('#inputTextBox_Reasoncode1');
});
$(".button_Reasoncode2").click(function() {
     $('#Reasoncode2').clone().insertAfter('#inputTextBox_Reasoncode2');
});

我不想为每个原因代码执行此操作，我想知道是否有更好的方法。我的jsfiddle：https：//jsfiddle.net/mvp71l61/

Answer 1

假设所有按钮都静态添加到DOM，

$("button[class*='button_Reasoncode']").click(function() {
  var rCode = $(this).attr('class').match(/d+/g)[0]; 
  $("div[id='Reasoncode'+rcode]").clone().insertAfter("input[id='inputTextBox_Reasoncode'+rcode]");
});