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 () {&nbsp;&nbsp; &nbsp; $(document).on('change', '.main-input1', function () {&nbsp; &nbsp; &nbsp; &nbsp; $(".activityType1.active").removeClass("active");&nbsp; &nbsp; &nbsp; &nbsp; var subList = $(".activityType1." + $(this).val());&nbsp; &nbsp; &nbsp; &nbsp; if (subList.length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; subList.addClass("active");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});&nbsp; &nbsp; const button = document.querySelector('button');&nbsp; &nbsp; const input = document.getElementById('NumberOfNights');&nbsp; &nbsp; const wrapper = document.querySelector('div.wrapper-activity');&nbsp; &nbsp; function generateItems(numOfItems) {&nbsp; &nbsp; &nbsp; &nbsp; let html = "";&nbsp; &nbsp; &nbsp; &nbsp; wrapper.innerHTML = "";&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; for(i = 1; i <= numOfItems; i++) {&nbsp; &nbsp; &nbsp; &nbsp; html += `&nbsp; &nbsp; &nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.activityType1 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .activityType1.active {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; &nbsp; &nbsp; <section class="activity-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; <label for="activity">Activity ${i}</label>&nbsp; &nbsp; &nbsp; &nbsp; <div class="select-style">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="activity" style="width: 300px;" name="activity" class='main-input1'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='none' disabled selected>--</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='Hiking'>Hiking</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='Biking'>Biking</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='Tasting'>Tasting</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>&nbsp; &nbsp; <section class='activityType1 Hiking activity-wrapper'>&nbsp; &nbsp; &nbsp; &nbsp; <div class="bottom-row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="hiking-activity">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="hiking-activity" value="National park Pieniny">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="../assets/img/3.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="hiking-activity">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="hiking-activity" value="National park Slovak paradise">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="../assets/img/4.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>&nbsp; &nbsp; <section class='activityType1 Biking activity-wrapper'>&nbsp; &nbsp; &nbsp; &nbsp; <div class="top-row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="biking-activity">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="biking-activity" value="National park High Tatras">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="../assets/img/5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="biking-activity">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="biking-activity" value="National park Pieniny">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="../assets/img/6.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>&nbsp; &nbsp; <section class='activityType1 Tasting activity-wrapper'>&nbsp; &nbsp; &nbsp; &nbsp; <div class="top-row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="tasting-activity">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="tasting-activity" value="Beer tasting">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="../assets/img/10.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="tasting-activity">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="tasting-activity" value="Whisky tour">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="../assets/img/11.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="bottom-row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="tasting-activity">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="tasting-activity" value="Tokaj wine tour">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="../assets/img/12.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>&nbsp; &nbsp; &nbsp; &nbsp; `;&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; return html;&nbsp; &nbsp; };&nbsp; &nbsp; button.addEventListener('click',() => {&nbsp; &nbsp; &nbsp; &nbsp; const n = parseInt(input.value);&nbsp; &nbsp; &nbsp; &nbsp; if (n) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wrapper.innerHTML = generateItems(n);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });<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>