Question

下面的图像元素位于AJAX脚本中。此图像是隐藏的，仅在触发ajax后生成，因此当我使用JQuery显示它时，它不起作用，因为该元素尚不存在。

有一个名为isTouchScreen的布尔变量。我试图显示此元素，如果isTouchScreen的值为true。

我是Javascript的新手，由于它是动态生成的，我很难显示隐藏的元素。有人可以帮我解决这个问题吗？非常感谢提前。

我尝试了什么：

if(isTouchScreen===true){
   $('.add-item').show();
}

使用AJAX动态生成的图像元素：

<img class="add-item" style="display:none" src="add-item.png">

Answer 1

尝试将条件放在AJAX回调中：

$.ajax({
  ...
  success: function() { // This runs if the request was succesful
    var $img = $('<img class="add-item" src="add-item.png">');
    $('yourContainer').append( $img.hide() ); // append and hide by default
    if ( isTouchScreen ) { // true is truthy, no need to compare
      $('.add-item').hide();
    }
  }
})

Answer 2

我在过去遇到过类似的问题，我在尝试调用动态引入DOM的元素上的方法之前引入了一个短暂的延迟。

也许这样的事情会有所帮助：

if (isTouchScreen===true) {
    setTimeout(function() {
        $('.add-item').show();
    }, 500);
}

其中500值以毫秒为单位。

有关详细信息，请参阅window.setTimeout。

如何显示使用AJAX动态生成的隐藏元素？

2 个答案: