重新呈现jQuery函数

Re-rendering jQuery function

本文关键字：函数 jQuery 新呈现      更新时间：2023-09-26

因此，我有以下jquery函数：

        jQuery('.button').click(function(e) {               
            if(!isMobile) {
                jQuery('.button').featherlight({                        
                });                                         
            }   
        })

这在<body>的底部创建了一个灯箱，如下所示：

灯箱打开前：

<body>
    <button> Show lightbox</button>
    <script src="https://...jquery.min.js"></script>
    <script src="https://...custom_js.js"></script>
</body>

灯箱打开后：

<body>
    <button> Show lightbox</button>
    <script src="https://...jquery.min.js"></script>
    <script src="https://...custom_js.js"></script>
    <div class="lightbox">Lightbox content</div>
</body>

问题是，这个灯箱中的jQuery函数都不能像加载页面后创建的那样工作。

创建灯箱后，如何"重新渲染"js文件？

谢谢！

这里有一个例子：

jQuery('#tags').keyup(function(e){
    console.log(e);                    
     if(e.which == 188) {
        var tag  = ...;
        var data = '<button>tag</button>';
        tags.push(tag);
        jQuery('.tags ul').append(data);
        jQuery(this).val('');
                }               
        });

在这里，标记输入将被"附加"或添加到div class="tags"中。然而，在灯箱内部，根本不执行此功能。

javascript不应该重新渲染JS文件。

我建议您在afterContent回调中运行a函数。

正如您在轻量级文档中所看到的，有很多回调可以帮助您做到这一点。

示例：

 jQuery('.button').click(function(e) {               
        if(!isMobile) {
            jQuery('.button').featherlight({
                afterContent: function () {
                    // Do your code here
                    // The lightbox content will be ready
                }
            });                                         
        }   
    })

这里的问题是光盒是动态添加的。

如果你需要任何触发器来在灯箱元素内部或上工作，你需要使用：

$(document).on('click', '.lightbox .button', function(){
    ...
});

请注意，您不希望将这些代码放在lightbox中，而是放在常规js文件中。简单地说，因为我们不喜欢内联js，其次，您可以使用上面的代码动态地触发每一个动态内容。

相关文章：