Question

所以，我有以下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函数都没有像加载页面后创建的那样工作。

我如何＆＃34;重新渲染＆＃34;创建灯箱后的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('');
                }               
        });

这里，标签输入将被＆＃34;附加＆＃34;或添加到div class =＆＃34;标签＆＃34;。但是在灯箱内部，根本不执行此功能。

Answer 1

重新呈现JS文件并不是javascript的工作方式。

我建议你做的是在afterContent回调中运行一个函数。

正如您在featherlight文档中所看到的，有很多回调可以帮助您解决这个问题。

示例：

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

                afterContent: function () {
                    // Do your code here
                    // The lightbox content will be ready
                }

            });                                         
        }   
    })

Answer 2

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

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

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

请注意，您不希望此代码位于该灯箱内，而是位于常规js文件中。仅仅因为我们不喜欢内联js，其次你可以使用上面的代码动态触发每个动态内容。

重新呈现jQuery函数

2 个答案: