如何让 xpages 模态触发关闭事件

Question

我有一个 xpage（通过网络浏览器查看），上面有许多 <xe:dialog...> 控件，导致引导模式对话框。

我想在任何对话关闭时运行一些客户端脚本。

所以我尝试了..

$('.modal').on('hide.bs.modal', function() { ...}

但是这不起作用，我怀疑是因为在加载 xpage 时实际上没有任何具有“modal”类的元素，直到打开一个元素。然后部分刷新会注入相关的 HTML。

所以我尝试在模式打开时（在 xpages onShow 事件中）运行上面的那一行，但这也没有触发。我猜这个事件可能是“当模式打开但在显示之前”，这意味着元素也不在屏幕上。

所以我也尝试了（hack，hack）2 秒的 setTimeout 来让模态首先显示，但仍然没有运气。

所以..问题是..

使用 xpages 引导模式，通过标准 xe:dialog 控件，我如何附加一个客户端 javascript 事件，当模式关闭/隐藏时将运行该事件？

Answer 1

您可以使用事件委托将侦听器绑定到（不存在的）模式的父元素，并在单击与该父元素中的 .modal 选择器匹配的元素时触发函数：

$(document).on("hide.bs.modal", ".modal", function () {...});

Answer 2

我做了类似的事情，其中​​一个模式上的按钮选择，关闭所述模式，然后根据单击的按钮打开下一个模式。如果不这样做，您可以不以相同的方式运行您的脚本吗？

        var
        currentModal = $(this);

        //click next
        currentModal.find('.btn-close').click(function(){
        currentModal.modal('hide');
        OTHER STUFF?

编辑 - 我的完整代码：

<script type="text/javascript">
    $("div[id^='myModal1']").each(function(){

    var
    currentModal = $(this);

    //click next
    currentModal.find('.btn-next').click(function(){
    currentModal.modal('hide');
    currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal3']").first().modal('show');
    });

    //click prev
    currentModal.find('.btn-prev').click(function(){
    currentModal.modal('hide');
    currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal2']").first().modal('show');
    });

    });
    $(window).on('load',function(){
    $('#myModal1').modal('show');
    });

</script>