如何将自动事件附加到 jquery 自动递增的 类 克隆元素

How To attach Automated Events to jquery cloned elements which classes are auto incremented

我正在构建一个行程图,当我单击“添加日期”时,会出现一个带有三个按钮的表单,这三个按钮在单击时还包含单独的附加表单,我也可以通过 .on 方法成功克隆添加事件监听器,但我的问题是最终用户可以使用添加新按钮提交 100 个表单,所以我需要一个技巧来自动附加事件以增加 类,因为我在我的程序中自动增加了 类。 (注意 budget accomdation transist 按钮也是表单)

我试图增加计数

此外,我想以预算住宿转账形式显示搜索结果并将数据提交给 mysql。 这一切都必须以干净的方式发生是可能的还是我必须在 reactjs

https://codepen.io/praveenshivashakti/pen/YzKoaye

<h2>DAy 1</h2>
<div class="job-content">
  <form class="form1">
  search: <input type="text" name="search"><br>
  Last name: <input type="text" name="lname"><br>
  First name: <input type="text" name="fname"><br>
  Dest name: <input type="text" name="destname"><br>
  Agent name: <input type="text" name="agname"><br>
  other details: <input type="text" name="ot">
  <input type="Button" value="Budget" name="company" class="fClick" />
  <input type="button" value="Accomdation" name="course" class="xClick" />
  <input type="button" value="Transist" name="date" class="rClick" />
</form>
</div>

<h1><a href="add-new-form">ADD New Day </a></h1>






$(function () {
    var duplicates = 0,
        $original = $('.job-content').clone(true,true);

    function DuplicateForm () {
        var newForm;

        duplicates++; 

        newForm = $original.clone(true).insertBefore($('h1'));

        $.each($('input', newForm), function(i, item) {            
            $(item).attr('class', $(item).attr('class') + duplicates);
        });

        $('<h2>Day  ' + (duplicates + 1) + '</h2>').insertBefore(newForm);
    }

    $('a[href="add-new-form"]').on('click', function (e) {
        e.preventDefault();
        DuplicateForm();
    });


    $(document).on('click', '.fClick', function(){ 
    alert("hey!");
}); 
 $(document).on('click', '.xClick', function(){ 
    alert("hey22!");
}); 
 $(document).on('click', '.rClick', function(){ 
    alert("hey33!");
}); 
});

我希望每个按钮都能触发单独的事件,但我需要任何自动化流程来执行此操作,就像我不想坐着一样

$(document).on('click', '.fClick', function(){ 
    alert("hey!");
});  

对每个按钮都这样做,因为我有一个生成 100 个表单的页面可能在提交之前

您好,您可以将活动附加到所有 类 开头相似的名字

$(document).on("click", "[class*='rClick']", function() { 
    console.log("hey 3");
});