jQuery .on适用于第一个html，但不适用于第二个（相同格式）

Question

So, I have this form that I used on both my html page and .on works on the first one but doesn't work on the second one even though all properties are same.

First HTML:

<div id="page1" class="row" style="text-align: center;">
            <h2 style="text-align: center;">Category</h2>
            <div class="btn-group" data-toggle="buttons" >
              <label class="btn btn-primary <?php echo $_SESSION['editEntry'][0]['category']=='Food'?'active':''; ?>">
                <input type="radio" name="category" id="food" autocomplete="off" <?php echo $_SESSION['editEntry'][0]['category']=='Food'?'checked':''; ?> value="Food"> Food
              </label>
              <label class="btn btn-primary <?php echo $_SESSION['editEntry'][0]['category']=='Non-Food'?'active':''; ?>">
                <input type="radio" name="category" id="non-food" autocomplete="off" <?php echo $_SESSION['editEntry'][0]['category']=='Non-Food'?'checked':''; ?> value="Non-Food"> Non-Food
              </label>
              <label class="btn btn-primary <?php echo $_SESSION['editEntry'][0]['category']=='Services'?'active':''; ?>">
                <input type="radio" name="category" id="services" autocomplete="off" <?php echo $_SESSION['editEntry'][0]['category']=='Services'?'checked':''; ?> value="Services"> Services
              </label>
              <label class="btn btn-primary <?php echo $_SESSION['editEntry'][0]['category']=='Technology'?'active':''; ?>">
                <input type="radio" name="category" id="technology" autocomplete="off" <?php echo $_SESSION['editEntry'][0]['category']=='Technology'?'checked':''; ?> value="Technology"> Technology
              </label>
            </div>

            <div class="box-footer">
              <div class="pull-right">
                <button type="button" id="next1" class="btn btn-primary"><i class="glyphicon glyphicon-chevron-right"></i> Next</button>
              </div>
            </div>
            <!-- /.box-footer -->
        </div>

Second HTML:

<div id="page1" class="row" style="text-align: center;">
                <h2 style="text-align: center;">Category</h2>
                <div class="btn-group" data-toggle="buttons" >
                  <label class="btn btn-primary active">
                    <input type="radio" name="category" id="food" autocomplete="off" checked value="Food"> Food
                  </label>
                  <label class="btn btn-primary">
                    <input type="radio" name="category" id="non-food" autocomplete="off" value="Non-Food"> Non-Food
                  </label>
                  <label class="btn btn-primary">
                    <input type="radio" name="category" id="services" autocomplete="off" value="Services"> Services
                  </label>
                  <label class="btn btn-primary">
                    <input type="radio" name="category" id="technology" autocomplete="off" value="Technology"> Technology
                  </label>
                </div>

                <div class="box-footer">
                  <div class="pull-right">
                      <button type="button" id="next1" class="btn btn-primary"><i class="glyphicon glyphicon-chevron-right"></i> Next</button>
                  </div>
                </div>
                <!-- /.box-footer -->
            </div>

JS:

$("#page1").on('click', '#next1, #next2, #next3, #next4, #next5', function(e){
e.preventDefault();
nextPage($(this).attr('id'));
});

function nextPage(selector){
switch(selector){
    case 'next1':
        $("#page1").attr("hidden", "hidden");
        $("#page2").removeAttr("hidden");
        break;
    case 'next2':
        if($("input[name='title']").val() == '' || $("textarea[name='description']").val() == ''){
            alert("Fill up the fields to continue..");
        }else{
            $("#page2").attr("hidden", "hidden");
            $("#page3").removeAttr("hidden");
            $(".certTitle").html($('#page2 input[name="title"]').val());
        }
        break;
    case 'next3':
        if($("input[name='college']").val() == '' || $("input[name='collegeAddress']").val() == '' || $("input[name='collegeDean']").val() == '' || $("input[name='coach']").val() == '' || $("input[name='contactPerson']").val() == '' || $("input[name='landline']").val() == '' || $("input[name='mobile']").val() == '' || $("input[name='email']").val() == ''){
            alert("Fill up the fields to continue..");
        }else{
            $("#page3").attr("hidden", "hidden");
            $("#page4").removeAttr("hidden");
            $("#certDean").html($("input[name='collegeDean']").val().toUpperCase());
            $("#certCoach").html($("input[name='coach']").val());
        }
        break;
    case 'next4':
        var empty = $("#students").find("input").filter(function() {
            if($(".setContact").val() == ""){
                return this.value = 1;
            }else{
                return this.value === "";
            }
        });
        if(contactPersonCount < 2){
            alert("Please select at least 2 alternative contact persons..");
        }else if($("input[name='firstname']").val() == '' || $("input[name='lastname']").val() == '' || $("input[name='email']").val() == '' || $("input[name='studentMobile']").val() == '' || $("input[name='dob']").val() == '' || empty.length){
            alert("Fill up the fields to continue..");
        }else{
            $("#page4").attr("hidden", "hidden");
            $("#page5").removeAttr("hidden");
            var currentCount = $("#students div").length;
            var studentsList = [];
            console.log(currentCount);
            for(var i = 1; i <= currentCount; i++){
                studentsList[i] = $("#students input[name='firstname"+i+"']").val() + " " + $("#students input[name='lastname"+i+"']").val();

            }
            $("#studentsList").children().remove();
            for(var i = 1; i <= currentCount; i++){
                $("#studentsList").append("<li>"+ studentsList[i] +"</li>");
            }
        }
        break;
    case 'next5':
        if($("input[name='presentationUpload']").val() == '' || $("input[name='documentUpload']").val() == ''){
            alert("Fill up the fields to continue..");
        }else{
            $("#page5").attr("hidden", "hidden");
            $("#page6").removeAttr("hidden");
        }
        break;
    default:
        console.log("Invalid Selector: " + selector);
        break;
   }
 }

I'm not sure why it doesn't trigger on the second one even if both of them have the same attributes.

NOTE: Those HTML codes resides on different HTML files but uses the same JS.

Answer 1

If you replace the whole <div id="page1"> then you lose the event listener attached to $("#page1") because that element is removed...even though it is replaced with a new one with same ID

Move the delegation higher to an asset that is permanent

Try:

$(document).on('click', '#next1, #next2, #next3, #next4, #next5', function(e){
    e.preventDefault();
    nextPage($(this).attr('id'));
});