使用 jQuery 生成的 span 不会自动对焦灯箱图像

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

试试我的 fork of youy pen： 我选择更新 src 和 href 属性，而不是重写整个 html https://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);
});