javascript - js 无法在 bs3 ajax 模式中工作

Question

我在 bs3 模态中使用 js 时遇到了一些问题 - 它不起作用。我正在使用 ajax 打开模式。

主页

<a href="/modals/comp_activate.php" data-target="#modal-ajax" data-toggle="modal"><i class="fa fa-plus-circle"></i> Activate this computer</a>';

<div class="modal fade" id="modal-ajax" tabindex="-1" role="basic" aria-hidden="true">
    <img src="/assets/img/ajax-modal-loading.gif" alt="" class="loading">
</div>

<script src="/assets/scripts/custom/custom.js" type="text/javascript"></script>
<script>
    jQuery(document).ready(function() {    
        Custom.init();
    });
</script>

自定义.js

var Custom = function () {

// private functions & variables

// external window links
var externalWindows = function() {
    $("a[data-window='external']").on('click', function() {
        window.open($(this).attr('href')); 
        return false; 
    });
}

// public functions
return {

    //main function
    init: function () {
        //initialize something here
        externalWindows(); // external window links 
    }

};

}();

模态页面中的链接

<a class="btn btn-primary" href="http://www.somesite.com/" data-window="external" onClick="$('#modal-ajax').modal('hide');"><i class="fa fa-shopping-cart"></i> Purchase Now</a>

这一切都是在浏览器的新窗口中打开带有 data-window="external" 的任何链接。由于模式页面是使用 ajax 打开的，因此主页中的 js 在加载时不会“拾取它”。我也可以在模式页面上添加该功能，但随后会导致主页出现问题。

我在这里能做什么？

Answer 1

您可以使用event delegation以便动态加载的链接触发您的处理程序:

var externalWindows = function () {
    function openWindow() {
        window.open($(this).attr('href')); 
        return false;
    }

    $("a[data-window='external").click(openWindow);
    $("#modal-ajax").on('click', "a[data-window='external']", openWindow);
};