Question

我有一个带有操作列的表，列有一个按钮（链接）以显示该行的详细信息。

以下代码显示每行:rowid中的按钮将是实际的ineger数。

<a data-path="http://example/rowdetails/:rowid" class="btn btn-info btn-xs load-ajax-modal" role="button" data-toggle="modal" data-target="#dynamic-modal">
    <span data-toggle="tooltip" title="Show Details">
        <span class="glyphicon glyphicon-eye-open"></span>
    </span>
</a>

以下是动态模式的html

<!-- Modal -->
<div id="dynamic-modal" class="modal modal-wide hide fade in" tabindex="-1" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Row Details</h4>
            </div>
            <div class="modal-body">
                <!--Dynamic body content appears here-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
<!-- /.Modal -->

以下是我正在使用的Javascript。

$(document).ajaxComplete(function () {
    // when .modal-wide opened, set content-body height based on browser height; 200 is appx height of modal padding, modal title and button bar
    $(".modal-wide").on("show.bs.modal", function () {
        var height = $(window).height() - 200;
        $(this).find(".modal-body").css("max-height", height);
    });

    /*Dynamic Modal window to load row details usin ajax load*/
    $('.load-ajax-modal').on('click',function () {
        url = $(this).data('path');
        //ajax call using load function
        $('.modal-body').load(url, function (result) {
            $('#dynamic-modal').removeClass('hide');
        });
    });
});

问题当我单击连续按钮时，一切正常，one单个ajax（xhr）调用。第二次我点击这个时间为同一个网址有two个ajax请求。我第三次单击按钮有four，第四次eight等等，它每次都会加倍前一个数字。

我在其他帖子中看到并尝试过.one（）。live（）。die（）等但我想我可以弄清楚到底在哪里使用这些函数（我用$（＆＃39; .load-尝试了这些函数） ajax-modal＆＃39;）它似乎不起作用。

谢谢，

ķ

Answer 1

那是因为您要对现有元素添加点击次数。最快的修复方法是在添加新操作之前关闭所有已注册的操作：$('.load-ajax-modal').off('click').on('click',function () {...就像我说的那样只是一种解决方法，在对话框关闭时摆脱该问题处理dom元素。

Answer 2

每次Ajax请求完成时，每次在单击按钮时将新函数添加为处理程序时，都会触发ajaxComplete处理程序。因此，处理程序函数执行一次，然后执行两次，然后四次执行就不足为奇了......

您应该做的是使用事件委派。

$(function onDocumentReady() {
    var $modal = $('#dynamic-modal');
    var $modalBody = $('.modal-body');
    var $window = $(window);

    $modal.on("show.bs.modal", function () {
        var height = $window.height() - 200;
        $(this).find(".modal-body").css("max-height", height);
    });


    $(document).on('click', '.load-ajax-modal', function (e) {
        url = $(this).data('path');
        //ajax call using load function
        $modalBody.load(url, function (result) {
            $modal.modal('show');
        });
    });
});

要记住几点：

如果多次使用jQuery对象，请始终将jQuery对象（例如$（window））缓存在变量中。这确保了每次查找特定DOM元素时jQuery都不需要查询DOM。
阅读Event Delegation。它确保即使将元素动态添加到页面中，也会执行事件处理程序。与jQuery.live（）提供的内容类似但长期以来一直被弃用。

每次单击链接以模态

2 个答案: