Question

I have a View and Desk.js file with javascript code.
In the View:

<script src='@Url.Content("~/Scripts/KazBilet/Desk.js")' type="text/javascript"></script> 

In the Desk.js file:

$(function () {
    $('.wraper').load('/desk/getsessionscreen');
    toggleSession();
});

function toggleSession() {
    alert('a');
    $('.sched a').on('click', function () {
        var target = $(this);
        $(this).toggleClass('selected');
        $('.sched a').not(target).each(function () {
            $(this).removeClass('selected');
        });

        setStateForStepButton();
    });
}

The elements with sched class and a tags contains in partial view which loaded in wraper div element.

The problem in that click handler not fire, but alert calls fine. How to solve it?
Thanks

Answer 1

You could put your click subscription code outside. You don’t even need to wait for the DOM to be ready:

$('.sched').on('click', 'a', function () {
    var target = $(this);
    $(this).toggleClass('selected');
    $('.sched a').not(target).each(function () {
        $(this).removeClass('selected');
    });

    setStateForStepButton();
});


$(function () {
    $('.wraper').load('/desk/getsessionscreen', function() {
        toggleSession();
    });

});

function toggleSession() {
    alert('a');
}

Also notice the correct overload I am using for the .on() method if you want to register lively:

$('.sched').on('click', 'a', function () {

Also note that if you want to call the toggleSession function when the AJAX call succeeds you should use the success callback of the .load method.