JavaScript：追加脚本后不起作用

Question

我有脚本，它根据输入的插入值创建新输入的数量。使用另一个脚本扩展了新输入，但此脚本不起作用。当附加的 html 代码不在 js 中而是在 index.html 中时，此脚本正在工作。然后这个脚本工作正常，但第一个脚本没有启动。代码：$(function () {                 $(".main-input1").on("change", function () {        $(".activityType1.active").removeClass("active");        var subList = $(".activityType1." + $(this).val());        if (subList.length) {            subList.addClass("active");        }    });});    const button = document.querySelector('button');    const input = document.getElementById('NumberOfNights');    const wrapper = document.querySelector('div.wrapper-activity');    function generateItems(numOfItems) {        let html = "";        wrapper.innerHTML = "";            for(i = 1; i <= numOfItems; i++) {        html += `        <style>         .activityType1 {            display: none;        }        .activityType1.active {            display: inline-block;        }        </style>        <section class="activity-wrapper">        <label for="activity">Activity ${i}</label>        <div class="select-style">            <select id="activity" style="width: 300px;" name="activity" class='main-input1'>                <option value='none' disabled selected>--</option>                <option value='Hiking'>Hiking</option>                <option value='Biking'>Biking</option>                <option value='Tasting'>Tasting</option>            </select>        </div>    </section>    <section class='activityType1 Hiking activity-wrapper'>        <div class="bottom-row">            <label class="hiking-activity">                <input type="radio" name="hiking-activity" value="National park Pieniny">                <img src="../assets/img/3.jpg">            </label>            <label class="hiking-activity">                <input type="radio" name="hiking-activity" value="National park Slovak paradise">                <img src="../assets/img/4.jpg">            </label>        </div>

Answer 1

将其更改为$(document).on('change', '.main-input1', function () {这种方式，您的第一个脚本可以在附加代码上启动。

$(function () { 

    $(document).on('change', '.main-input1', function () {

        $(".activityType1.active").removeClass("active");

        var subList = $(".activityType1." + $(this).val());

        if (subList.length) {

            subList.addClass("active");

        }

    });

});

    const button = document.querySelector('button');

    const input = document.getElementById('NumberOfNights');

    const wrapper = document.querySelector('div.wrapper-activity');

    function generateItems(numOfItems) {

        let html = "";

        wrapper.innerHTML = "";

    

        for(i = 1; i <= numOfItems; i++) {

        html += `

        <style>

         .activityType1 {

            display: none;

        }

        .activityType1.active {

            display: inline-block;

        }

        </style>

        <section class="activity-wrapper">

        <label for="activity">Activity ${i}</label>

        <div class="select-style">

            <select id="activity" style="width: 300px;" name="activity" class='main-input1'>

                <option value='none' disabled selected>--</option>

                <option value='Hiking'>Hiking</option>

                <option value='Biking'>Biking</option>

                <option value='Tasting'>Tasting</option>

            </select>

        </div>

    </section>

    <section class='activityType1 Hiking activity-wrapper'>

        <div class="bottom-row">

            <label class="hiking-activity">

                <input type="radio" name="hiking-activity" value="National park Pieniny">

                <img src="../assets/img/3.jpg">

            </label>

            <label class="hiking-activity">

                <input type="radio" name="hiking-activity" value="National park Slovak paradise">

                <img src="../assets/img/4.jpg">

            </label>

        </div>

    </section>

    <section class='activityType1 Biking activity-wrapper'>

        <div class="top-row">

            <label class="biking-activity">

                <input type="radio" name="biking-activity" value="National park High Tatras">

                <img src="../assets/img/5.jpg">

            </label>

            <label class="biking-activity">

                <input type="radio" name="biking-activity" value="National park Pieniny">

                <img src="../assets/img/6.jpg">

            </label>

        </div>

    </section>

    <section class='activityType1 Tasting activity-wrapper'>

        <div class="top-row">

            <label class="tasting-activity">

                <input type="radio" name="tasting-activity" value="Beer tasting">

                <img src="../assets/img/10.jpg">

            </label>

            <label class="tasting-activity">

                <input type="radio" name="tasting-activity" value="Whisky tour">

                <img src="../assets/img/11.jpg">

            </label>

        </div>

        <div class="bottom-row">

            <label class="tasting-activity">

                <input type="radio" name="tasting-activity" value="Tokaj wine tour">

                <img src="../assets/img/12.jpg">

            </label>

        </div>

    </section>

        `;

        };

        return html;

    };

    button.addEventListener('click',() => {

        const n = parseInt(input.value);

        if (n) {

            wrapper.innerHTML = generateItems(n);

        }

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="NumberOfNights" placeholder="--" type="number" name="nights" max="5">

<button type="button">Continue</button>

<div class="wrapper-activity"></div>