javascript - 第一次尝试加载ajax数据时javascript的奇怪行为

Question

我有一个页面(shop.php)，在 DIV 单击时，我会弹出一个覆盖层，然后从另一个 PHP 页面(detail.php)加载 ajax 数据，如下所示:

shop.php 的 HTML:

<div class="box-item2" 
 style="background:url(<?=$img_path?>); 
        background-size:cover;
        background-position: 50% 50%; 
        overflow:hidden;
        width:100%; height:420px; "

onclick="clicked(this);"

id="<?=$prod_id?>">


    <div class="overlay">&nbsp;</div>
    <span class="txtover">VIEW DETAILS</span>
</div>  

我的shop.php JS 函数:

function clicked(div) {

   var id = div.id;
   $("#overlay3-content").html("");
   $.ajax({
       type: "GET",
       url: "detail.php",   
       data: {id: id},
       dataType: "html",   //expect html to be returned                
       success: function(response){                    
           $("#overlay3-content").html(response); 
            }
      });

   $("#overlay3").css("display", 'block').css("opacity", '1');
   $("#mask").css("display", 'block').css("opacity", '1');
   $("#container_close").css("display", 'block').css("opacity", '1');
}

当我执行此操作时，没有问题，覆盖弹出窗口可以很好地加载来自detail.php的代码。

然而，在detail.php中，我使用另一个javascript函数来更改缩略图点击时的div背景图像。 JS代码如下:

来自detail.php内部的JS代码

$('.image_thumb').click(function(){

  var url = $(this).attr("id");
  $('#image_main').css('background-image', 'url(url)');
});

我的问题。当我第一次加载页面 shop.php 时(刷新后)，我单击一个 DIV 并打开弹出窗口，但内部 (detail.php) 中单击缩略图以更改背景图像的 JS 函数不起作用。

如果我退出覆盖弹出窗口(不刷新)，然后重新打开覆盖弹出窗口，则detail.php上用于更改背景图像的JS函数将起作用。

似乎我需要打开弹出窗口，关闭它，然后重新打开它才能正常工作，我不知道为什么。如果我通过直接进入detail.php(通过绕过shop.php的加载弹出过程)来尝试我的代码，那么它会立即工作。没问题

所以，第一次尝试执行detail.php的JS时，加载弹出窗口似乎缺少一些东西

有什么想法吗？谢谢

Answer 1

只是一个猜测，但尝试一下:

$(document).on('click', '.image_thumb', function(){
  var url = $(this).attr("id");
  $('#image_main').css('background-image', 'url(url)');
});