将元素绑定到 FeatherLight JS Lightbox

Question

显然我在从 featherLight js 绑定到灯箱时遇到了问题。这是我的代码：

  $(document).on("click", "#plate_preview_btn", function() {
    $.featherlight('#previewCompleteContainer', {});
  });

根据我对上述代码的理解，我正在绑定文档。那么之后动态添加的任何东西都应该绑定到右边吗？

上面的代码在我点击#plate_preview_btn后生成了一个灯箱。

然后我在代码和控制台中都有运行以下内容：为了阐明下面的代码需要运行而 Lightbox 在屏幕上而不是 BEFORE 因为这只是一个示例 css，宽度将添加一个动态值，我只能在 Lightbox 之后设置在屏幕上。

$('#img_preview_text_container').css("width", '300px');

Lightbox中的div没有添加宽度：300px；如果我关闭灯箱并再次单击它，它就会添加它。根据我的研究，这是因为绑定。我不明白为什么上面的代码应该从我读过的内容中工作。还尝试将 featherlight 直接绑定到按钮，但也没有用：

$("#plate_preview_btn")..featherlight(....)

知道我做错了什么吗？

编辑：添加 html 代码：

<div class="impact_image_section">
    <button class="action_button" id="plate_preview_btn">preview</button
</div>

<div id="previewCompleteContainer" >
        <img src="https://citylocs.com/apps/preview/img/Texas-Classic-License-Plate-Preview.jpg" alt="" id="preview_image_img">
        <div id="img_preview_text_container" style="position: absolute; top: 120px; left: 56px;">
            <div id="img_preview_text" style="color: #000000;"></div>
        </div>
        </div>

Answer 1

您的代码似乎运行良好。看这个例子：

$(document).on("click", "#plate_preview_btn", function() {
  $.featherlight('#previewCompleteContainer', {});
});

$('#img_preview_text_container').css("width", '300px');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js"></script>

<div class="impact_image_section">
  <button class="action_button" id="plate_preview_btn">preview</button>
</div>

<div id="previewCompleteContainer">
  <img src="https://citylocs.com/apps/preview/img/Texas-Classic-License-Plate-Preview.jpg" alt="" id="preview_image_img">
  <div id="img_preview_text_container" style="position: absolute; top: 120px; left: 56px;">
    <div id="img_preview_text" style="color: #000000;"></div>
  </div>
</div>

Answer 2

这最终对我有用：

  $(document).on("click", "#plate_preview_btn", function() {
    $.featherlight('#previewCompleteContainer', {});

    $.featherlight.defaults.afterOpen = function(){
    var flc = $(".featherlight-content");
    var previewBox = flc.find('#img_preview_text_container');
    previewBox.css('width', '400px');
};
  });

将元素绑定到 FeatherLight JS Lightbox

binding element to FeatherLight JS Lightbox

jquery

featherlight.js