Adding checkboxes dynamically in jquery

Question

I have a main category that consists of a row of checkboxes. In this main category, I have a button Add Section, which adds another row of checkboxes and keep adding another row of checkboxes after each click on the Add Section.

So, the main category is composed with a new input field as input type="text" id="sup-title-1" class="sup-title js-sup-title" value="sup 1"> , the code as follows. And it also consists of checkboxes are dynamically added via a for-loop.

This is the initial main category with static elements and dynamically generated checkboxes

<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>

So now, when I hit the Add Section button, another row of checkboxes are dynamically created inside this main section using the same for-loop as per above.

Outside the main section, I have a button Create New Category that creates another main section. This is as per below:

This is other main sections that will be generated dynamically

 <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>

Now, the code for adding each sub-category within the main category is as per below. What the code is doing that it adds another row of checkboxes, and performs a validation on the checkboxes. It checks if the above checkbox in the row has already been checked. This works perfectly fines until I add another main category, which does not add the sub-category properly when I click the Add Section button within that main category in that main category. Note that currently each sub-category is dynamically added after .js-splits-item.

Please, can someone help me with this to get this working ? I am really struggling with this. I can provided additional details.

<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>

Does it seem like your js-add-split event handler is not being called on the dynamically created items? — Dan Orlovsky, May 15 '18 at 17:19
Please see this, as I believe following this format may help with your problem. https://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements Comment if you need more help. — Dan Orlovsky, May 15 '18 at 17:21
But in my case, I already have a `js-splits-item`. Also, other `js-splits-item` are being dynamically added. @Dan Orlovsky — ExpertGenie, May 15 '18 at 17:41
Right - so the event handler will work with the one's that exist. Not the new ones. Try delegating your bindings. — Dan Orlovsky, May 15 '18 at 18:13

score 0 · Answer 1 · answered May 16 '18 at 13:06

An explanation of event delegation can be found here: jQuery Event Delegation and in the Stack Overflow answer provided in the comments: Stack Overflow Event Delegation.

The problem is you are using Direct Binding which means, you are binding directly to an element that exists on the DOM. The issue you're facing is, you want to link events to elements that don't yet exist. To accomplish this, you start by attaching the event handler to a higher-order component, and delegating down to the element you are seeking.

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

Notice - you use the on() jQuery method rather than click() directly, and we choose a higher-order component. In this example, I used document - which is rather extreme, but hopefully you get the picture.

Adding checkboxes dynamically in jquery

1 Answers1