HTML-Elemente aktualisieren nicht von Ereignishandlern in der mobilen Ansicht

Question

Alles funktioniert einwandfrei in großen Breiten, aber wenn es um kleinere Bildschirmgrößen geht, die ich über die Menüschaltfläche verwenden muss, wird HTML nicht von Ereignishandlern aktualisiert (obwohl es gut zu funktionieren scheint, wenn ich mit console.log() überprüfe). Nun nehme ich an, ich klicke auf "online" in der mobilen Ansicht, es wird nicht die HTML-Seite aktualisieren, aber wenn ich es auf eine große Breite skalieren, bis der Button nicht mehr erscheint, aktualisiert es den HTML-Code. Was könnte falsch sein? Ich schätze deine Hilfe.

Hier ist meine jQuery-Code:

$(document).on('click', '.alli',() => { 
    $(".colu").hasClass("no_display") ? (console.log("Yes"), $(".colu").removeClass("no_display")) : console.log("no"); 
    ($("#online").hasClass("oncli")) ? ($("#online").removeClass("oncli"), $("#all").addClass("oncli")) : 
    ($("#offline").hasClass("oncli")) ? ($("#offline").removeClass("oncli"), $("#all").addClass("oncli")) : 
    console.log("Adding class oncli"); 
}); 

$(document).on('click', '.onlinei',() => { 
    $("#offline").hasClass("oncli") ? ($("#offline").removeClass("oncli"), $("#online").addClass("oncli")) : 
    $("#all").hasClass("oncli") ? ($("#all").removeClass("oncli"), $("#online").addClass("oncli")) : 
    console.log("Adding class oncli"); 
    $(".online").hasClass("no_display") ? (console.log("yes"), $(".online").removeClass("no_display"), $(".offline").addClass("no_display")) : 
    $(".offline").hasClass("no_display") ? console.log("already in online views") : $(".offline").addClass("no_display"); 
}); 
$(document).on('click', '.offlinei',() => { 
    $("#all").hasClass("oncli") ? ($("#all").removeClass("oncli"), $("#offline").addClass("oncli")) : 
    $("#online").hasClass("oncli") ? ($("#online").removeClass("oncli"), $("#offline").addClass("oncli")) : 
    console.log("Adding class oncli"); 
    $(".offline").hasClass("no_display") ? (console.log("yes"), $(".offline").removeClass("no_display"), $(".online").addClass("no_display")) : 
    $(".online").hasClass("no_display") ? console.log("already in offline views") : $(".online").addClass("no_display"); 
}); 


$(document).on('paste copy cut keyup keydown', '#search-bar',() => { 
     ($("#search-bar").val() === "search") ? $("#search-bar").val(""): console.log("searching.."); 
     $(".name").each(function() { 
     ($(this).text().toLowerCase().indexOf($("#search-bar").val()) > -1) ? $(this).parent().parent().removeClass("no_display"): 
      ($(this).parent().parent().addClass("no_display")); 
     }); 

Answer 1

Habe ich es eine CSS-Eigenschaft display:inline-block im @media war, dass das abnormale Verhalten verursacht.