Question

好的，这是我的问题，我的数据表中有一个项目列表，占据了数据表中的多个页面，现在我绑定了一个按钮的模态，从外部页面找到一个div来获取div并填充模态数据表上的第一个链接工作，模态找到div并将其放入模态...

但是当我转到数据表的第2页或第3页时，它会加载模态，但是找不到div，我已经在click函数内部发出警告但是这不起作用，这意味着它没有绑定一些怪异原因是什么？

我在做什么：

function setModalHandler() {

    // unbind all previously-attached events
    $("a[data-target=#globalModal]").unbind();

    $("a[data-target=#globalModal]").click(function (ev) {
        ev.preventDefault();

        $("#globalModal").modal("show");
        var target = $(this).attr("href");

        $.ajax({
            url: target,
            type: 'GET',
        }).done(function(data)
            {
                $(".modal-content").html($(data).find('.inner_modal'));
                $(".modal-header").prepend('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>');
            }) ;

    });
}

我的数据表中的链接：

<a href="<?php echo Config::get('URL'); ?>company/edit_job/<?php echo System::escape($jobs->job_id); ?>" data-toggle="modal" data-target="#globalModal" class="btn btn-default btn-xs tt"><i class="fa fa-pencil"></i></a>

我没有收到控制台错误，但似乎我的数据表中的第一个结果使用了上面的js，但是当我点击第2页或第3页等时它们没有绑定

Full JS：

/**
 * setModalLoader
 *
 * Change buttons with loader
 *
 */
function setModalLoader() {
    $(".modal-footer .btn").hide();
    $(".modal-footer .loader").removeClass("hidden");
}


$(document).ready(function () {

    /* Ensures after hide modal content is removed. */
    $('#globalModal').on('hidden.bs.modal', function (e) {
        $(this).removeData('bs.modal');

        // just close modal and reset modal content to default (shows the loader)
        $(this).html('<div class="modal-dialog"><div class="modal-content"><div class="modal-body"><div class="loader"><div class="sk-spinner sk-spinner-three-bounce"><div class="sk-bounce1"></div><div class="sk-bounce2"></div><div class="sk-bounce3"></div></div></div></div></div></div>');
    })

    // set Modal handler to all modal links
    setModalHandler();

    initPlugins();

});

function setModalHandler() {

    // unbind all previously-attached events
    $("a[data-target=#globalModal]").unbind();

    $("a[data-target=#globalModal]").click(function (ev) {
        ev.preventDefault();

        $("#globalModal").modal("show");
        var target = $(this).attr("href");

        $.ajax({
            url: target,
            type: 'GET',


        }).done(function(data)
            {

                $(".modal-content").html($(data).find('.inner_modal'));

                $(".modal-header").prepend('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>');
            }) ;

    });
}

function initPlugins() {

    // show Tooltips on elements inside the views, which have the class 'tt'
    $('.tt').tooltip({
        html: false,
        container: 'body'
    });

    // show Popovers on elements inside the views, which have the class 'po'
    $('.po').popover({html: true});

    // activate placeholder text for older browsers (specially IE)
    $('input, textarea').placeholder();

    // Replace the standard checkbox and radio buttons
    $('body').find(':checkbox, :radio').flatelements();

    $('a[data-loader="modal"], button[data-loader="modal"]').loader();

}

// call this after every ajax loading
$(document).ajaxComplete(function (event, xhr, settings) {

    initPlugins();

    // set Modal handler to all modal links
    setModalHandler();

});

$('#globalModal').on('shown.bs.modal', function (e) {
    // reduce the standard modal width
    $('.modal-dialog').css('width', '600px');
})


$(document).on('show.bs.modal', '.modal', function (event) {
    $(this).appendTo($('body'));
});
$(document).on('shown.bs.modal', '.modal.in', function (event) {
    setModalsAndBackdropsOrder();
});
$(document).on('hidden.bs.modal', '.modal', function (event) {
    setModalsAndBackdropsOrder();
});



function setModalsAndBackdropsOrder() {
    var modalZIndex = 9999;
    $('.modal.in').each(function (index) {
        var $modal = $(this);
        modalZIndex++;
        $modal.css('zIndex', modalZIndex);
        $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
    });
    $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
}

Answer 1

尝试动态绑定事件，如下所示（ for jQuery＆gt; = 1.7 ）：

$(document).on("click",".yourIdentifier", function(e) {
 ...
});

它将适用于与该标识符匹配的所有未来元素。

Answer 2

如果jQuery版本＆lt; 1.7你可以这样使用。

$(".yourIdentifier").live("click", function(e) {
  alert("Its Working.!");
});

在数据表中使用链接并使用分页时，绑定单击不起作用

2 个答案: