使用jQuery生成的跨度不会自动聚焦lighbox图像

Question

我有一个jQuery代码，在下拉菜单更改时会生成一个灯箱范围。我的目标是在更改下拉菜单时显示该图像，并能够单击该图像以使灯箱显示在屏幕上。

我遇到的问题是，当我更改下拉菜单时，图像会显示，但是灯箱需要双击才能打开。

我认为这是因为下拉菜单具有焦点，而灯箱图像需要首先聚焦，然后才能单击它。

对我来说，一种解决方案是将焦点自动传递到灯箱，以便在下拉菜单中更改灯箱图像已经具有焦点，并且只需单击一下即可。但是，我希望我不会从下拉菜单中自动失去焦点，因为可能会有一些用户希望通过键盘上/下箭头来浏览下拉菜单。

我注意到的一件事是，如果我在HTML中具有span静态值，则不会发生此问题。我的猜测是，重点不是什么，而是动态创建跨度。我还没有找到解决这个问题的解决方案，但我的想法已经用尽。任何人对我应该寻找的内容有什么建议，也可以参考手册以进一步调整代码？

这里是简化的Codepen样本：https://codepen.io/speedygonzales77/pen/jOOZJLJ

           if ( (preferred_facility == 'Classroom (laboratory)') && (label == 'BRYAN CAMPUS') ) {


          $('.img_link').html('<a data-lightbox="blinn-gallery" data-title="" href="https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/classroom-laboratory.jpg"><img alt="Classroom (laboratory)" class="img-thumbnail" height="200" src="https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/classroom-laboratory.jpg" width="300"></a>');


        }

Answer 1

尝试用我的笔叉：我选择更新src和href属性，而不是重写整个htmlhttps://codepen.io/phmmeyer/pen/xxxWOMg

 $( document ).ready(function() {
 let brianCampusImages = [
   {label:"student-center-f-140",image:"https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/student-center-f-140.jpg"},
    {label:"Classroom (laboratory)",image:"https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/classroom-laboratory.jpg"}
 ]

$("#preferred_facility").on("change",function(){
  let offset = parseInt($(this).val())
  let zone = $("#blinn-gallery-zone");
  $(zone)
    .find("a")
    .attr("href",brianCampusImages[offset].image);

    $(zone)
    .find("img")
    .attr("src",brianCampusImages[offset].image)
    .attr("alt",brianCampusImages[offset].label);

  setTimeout(function(){
    zone.css("display","inline-block")
  },500);
});