Boombox called from within $(this) block does not show - outside of it no problems

69 Views Asked by At

I am trying to display a bootbox from inside a $(document).ready block. This displays fine until I put the line that calls the function inside a $(this) block. Any ideas on what is preventing this from working?

I have the following code:

    $(document).ready(function()
    {
        var getID = '#removeEntryCourses';


        $(this).on('click', getID, function () 
        {
            bootDialogSuccess('<h2>Are you sure?</h2>', 'Are you sure you want to delete this course?<br/>This cannot be undone.');
        });

        //bootDialogSuccess('<h2>Are you sure?</h2>', 'Are you sure you want to delete this course?<br/>This cannot be undone.'); 
        //When this line is uncommented and the $(this) block is removed there is no issue.

    });

    function bootDialogSuccess(title, message)
    {
        bootbox.dialog
        ({  
            message: message,
            title: title,
            buttons: 
            {
                success: 
                {
                    label: "OK",
                    className: "btn-success",
                    callback: function() 
                    {
                        alert('hello');
                        //removeCourse(total);
                    }
                }
            }
        });
    }
1

There are 1 best solutions below

0
On

So the culprit of the problem was return false was missing after the function call.

    $(this).on('click', getID, function () 
    {
        bootDialogSuccess('<h2>Are you sure?</h2>', 'Are you sure you want to delete this course?<br/>This cannot be undone.');

        return false;
    });

However I am not sure why this was not causing the issue when the jsfiddle was posted in the comments.