Question

所以，我在我的html页面上使用了这个表单，.on在第一个表单上工作但在第二个表单上工作但即使所有属性都相同。

第一个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>

第二个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;
   }
 }

我不确定为什么它不会在第二个上触发，即使它们都具有相同的属性。

注意：这些HTML代码驻留在不同的HTML文件中，但使用相同的JS。

Answer 1

如果替换整个<div id="page1">，则会丢失附加到$("#page1")的事件侦听器，因为该元素已被删除...即使它被替换为具有相同ID的新元素

将委托更高地移动到永久资产

尝试：

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

JQuery .on适用于第一个html，但不适用于第二个（相同的形式）

1 个答案: