CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
4334738290
4334738290

Reputation: 393

Binding a click is not working when using a link inside a datatable and using the pagination

Okay, here's my problem, I have a list of of items in my Datatable to take up multiple pages in the datatables, now I am binding a modal for a button, to find a div from an external page to get the div and populate the modal the first links on the datatables work and the modal finds the div and puts it in the modal...

Video of what I mean: http://recordit.co/GxoaaVniu9

But when I go to page 2 or 3 of the datatable it loads the modal, but doesn't find the div, I have alerted inside the click function but that doesn't work, which means its not binding for some weird reason?

What I am doing:

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>');
            }) ;

    });
}

My links inside my datatable:

<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>

I am receiving no console errors, but it seems like the first results in my datatable use the above js, but when I click page 2 or 3 etc they don't bind

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');
}

Upvotes: 1

Views: 495

Answers (2)

Ramesh
Ramesh

Reputation: 1887

If jQuery version < 1.7 you can use like this.

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

Upvotes: 1

overburn
overburn

Reputation: 1234

Try binding the event dynamically, like this (for jQuery >=1.7):

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

It will apply to all future elements that match that identifier.

Upvotes: 1

Related Questions