Jquery 如何使用变量作为 .change() 函数的标识符？

Question

现在我是 Javascript/Jquery 的初学者。 我想创建一个动态代码，以便在网站出现一些新功能时它可以工作，而无需编辑代码。

现在我刚刚在一些帖子中阅读了如何使用变量作为 id 的标识符，但它对我不起作用。下面是一个例子：

var category;
$('#mainCategory').change(function (event) {
   checkboxID = event.target.id;
   category="category"+checkboxID;
   ...some code...
});
$("#"+category).change(function (event) {
    $('#category'+checkboxID+' :input').attr('class','' );
    console.log("var: "+category);
});

因此，当我使用整个表达式而不是使用变量时，函数 mainCategory 总是在另一个函数之前运行，并且类别在第二个函数中写入正确。 我希望你能帮助我。

html代码部分：

 <form method="post" action="../php/saveTraining.php">
    <section id="mainCategory" class="hidden">
        <label><input type="checkbox" id="Krafttraining">Krafttraining</label>
        <label><input type="checkbox" id="Joggen">Joggen</label>
    </section>
    <section id="categoryKrafttraining" class="hidden">
        <label><input type="checkbox">Kurzhantel</label>
        <label><input type="checkbox">Bankdrücken</label>
        <label class="hidden"><input type="number" id="saetze">Sätze</label>
        <label class="hidden"><input type="number" id="wiederholungen">Wiederholungen</label>
    </section>
    <input type="hidden" id="saveTraining" name="sent" value="save" class="hidden"/>
</form>

因此，实际发生的是，当检查MainCategory的复选框时，将出现第二部分的复选框。 但是当我选中第二部分的复选框时，没有任何反应。

Answer 1

我之前以为我有解决方案，但我发现我错了。我相信这应该可行，您可以在其中重新添加侦听器作为 var category 更改的值：

var category;
$('#mainCategory input[type="checkbox"]').change(function (event) {
     checkboxID = event.target.id;
     category="category"+checkboxID;

     $('#' + category).find('input[type="checkbox"]').off("change").on("change", function (event) {
         $('#category'+checkboxID+' :input').attr('class','' );
         console.log("var: "+category);
     });
 });

您需要重新添加侦听器，因为新元素将作为 var 类别更改的目标。