在jquery

Question

我有一个主要类别，包含一行复选框。在这个主要类别中，我有一个按钮Add Section，它会添加另一行复选框，并在每次点击Add Section后继续添加另一行复选框。

因此，主要类别由新输入字段input type="text" id="sup-title-1" class="sup-title js-sup-title" value="sup 1">组成，代码如下。它还包含通过for-loop动态添加的复选框。

这是包含静态元素和动态生成复选框的初始主要类别

<div class="services-content sup-content">
    <div class="services__supnisation">
        <div class="services__supnisation-title">
            <input type="text" id="sup-title-1" class="sup-title js-sup-title" value="sup 1">
        </div>

        <div class="services-item js-splits-item">
            <ul>
                @{
                    int num = (int)TempData["Counter"];
                    int numOfCheckboxes = (4 * (num)) - 1;

                    for (int j = 1; j <= numOfCheckboxes; j++)
                    {
                        <li>
                            <input type="checkbox" id="sup-@j-1">
                            <label for="sup-@j-1"><i class="icon-tick" disabled></i></label>
                        </li>
                    }
                }
            </ul>

            <div class="services-item__footer">
                <small class="services-item__availability">
                    <span class="title">Section 1</span>
                </small>
            </div>
        </div>

        <div class="services-actions">
            <button type="button" class="mdl-button secondary-btn secondary-btn-border add-split-btn js-add-split mdl-js-button mdl-js-ripple-effect">
                 Add Section
            </button>
        </div>

    </div>

    <!-- New Category should be added here -->

</div>

现在，当我点击Add Section按钮时，在此主要部分内使用与上面相同的for-loop动态创建另一行复选框。

在主要部分之外，我有一个按钮Create New Category，可以创建另一个主要部分。这是如下：

这是将动态生成的其他主要部分

 <div class="stepper__services">

        <div class="services-actions">
            <button type="button" class="mdl-button secondary-btn secondary-btn-border js-create-sup mdl-js-button mdl-js-ripple-effect">
                Create New Category
            </button>


        </div>
    </div>

<script>

    $('.js-create-sup').click(function () {

        var count = 2;

        var supContent = `<div class="services__supnisation">

        <div class="services__supnisation-title">
            <input type="text" id="sup-title-`+count+`" class="sup-title js-sup-title" value="sup`+count+`">
        </div>

        <div class="services-item js-splits-item">
            <ul>
                @{
                    int num = (int)TempData["Counter"];
                    int numOfCheckboxes = (4 * (num)) - 1;

                    for (int j = 1; j <= numOfCheckboxes; j++)
                    {
                        <li>
                            <input type="checkbox" id="sup-@j-`+count+`">
                            <label for="sup-@j-`+count+`"><i class="icon-tick" disabled></i></label>
                        </li>
                    }
                }
            </ul>

            <div class="services-item__footer">
                <small class="services-item__availability">
                    <span class="title">Section 1</span>
                </small>
            </div>
        </div>

        <div class="services-actions">
            <button type="button" class="mdl-button secondary-btn secondary-btn-border add-split-btn js-add-split mdl-js-button mdl-js-ripple-effect">
                 Add Section
            </button>
        </div>

    </div>`;

        $(supContent).last().clone().insertAfter($('.sup-content').last());

        count++;
    });

</script>

现在，在主要类别中添加每个子类别的代码如下所示。代码正在做什么，它添加了另一行复选框，并对复选框执行验证。它检查是否已检查行中的上述复选框。在我添加另一个主要类别之前，这会完全被罚款，当我单击该主要类别中该主要类别中的Add Section按钮时，该类别不会正确添加子类别。请注意，目前每个sub-category都会在.js-splits-item之后动态添加。

拜托，有人可以帮我解决这个问题吗？我真的很挣扎。我可以提供更多细节。

<script>
    var count = 1;

    $('.js-add-split').click(function () {
        count++;
        var splitContent = `<div class="services-item js-splits-item">
            <ul>
                @{
                    for (int j = 1; j <= numOfCheckboxes; j++)
                    {
                        <li>
                            <input type="checkbox" id="sup-@j-`+count+`">
                            <label for="sup-@j-`+count+`"><i class="icon-tick" disabled></i></label>
                        </li>
                    }
                }

            </ul>

            <div class="services-item__footer">
                <small class="services-item__availability">
                    <span class="title">Section` + count + `</span>
                </small>

            </div>
        </div>`;

        $(splitContent).last().clone().insertAfter($('.js-splits-item').last());

        $('.js-splits-item [type="checkbox"]').change(function () {
            var idx = $(this).closest('li').index(); 
            var chk = $(this).is(":checked");            
            var obj = this;                            

            $('.js-splits-item').each(function () {         
                $(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false);
            });

        });

    });

</script>

Answer 1

可以在此处找到事件委托的说明： jQuery Event Delegation以及评论中提供的Stack Overflow答案：Stack Overflow Event Delegation。

问题是您正在使用直接绑定，这意味着您直接绑定到DOM上存在的元素。您面临的问题是，您希望将事件链接到尚不存在的元素。要实现这一点，首先要将事件处理程序附加到更高阶的组件，然后委托给您正在寻找的元素。

$(document).on("click", ".js-add-split", function () { ...

注意 - 您直接使用on() jQuery方法而不是click()，我们选择更高阶的组件。在这个例子中，我使用document - 这是相当极端的，但希望你能得到图片。