Jquery .hide（）不处理动态元素

Question

我正在开发一个响应式测验应用程序，我在页面加载时加载所有问题，但一次显示一个问题。用户界面看起来像这样：

在移动视图中，所有问题都以长卷轴方式显示。

用户单击按钮后，这些问题将加载到同一页面上。我正在使用ng-if和ng-click（AngularJS）

由于页面加载时内容不存在，我使用了jquery .on()函数进行上一次和下一次按钮点击。

为了加载问题并显示它们，我编写了一个jquery函数initialize()，它根据窗口大小显示问题。我已经在btn click和window resize上调用了该函数。 功能代码是：

function initialize() {
        alert('called')
        current = 1;
        if ($(window).width() > 768) {
            var i = 2;
            var next = $("#"+i).length;

            //hide all except first question
            $("#1").show(); //shows first ques
            $("#previous").children('img').addClass('disabled');
            $("#next").children('img').removeClass('disabled');
            while(next>0){ //hides all ques except first
                $("#"+i).hide();
                i++;
                next = $("#"+i).length;
            }
        }
        else{
            //alert('mobile');
            var i = 1;
            var next = $("#"+i).length;

            //show all questions (long scroll)
            while(next>0){
                $("#"+i).show();
                i++;
                next = $("#"+i).length;
            }
        }

我已经设置alert()来检查函数何时被调用。 我得到alert()，但.hide()似乎不起作用，因为所有问题都在显示。

但是，当我调整窗口大小时，当函数被调用时，一切都按预期工作（一次一个问题），.hide()也在工作。

我不确定是什么问题。我从2天开始坚持这个。