jquery - 单击处理程序未触发（部分视图）

Question

我有一个带有 javascript 代码的文件View。 在：Desk.js
View

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

在Desk.js文件中：

$(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();
    });
}

具有sched类和a标签的元素包含在加载到wraperdiv 元素中的部分视图中。

该click处理程序中的问题不会触发，但alert调用正常。如何解决？
谢谢

Answer 1

您可以将您的点击订阅代码放在外面。你甚至不需要等待 DOM 准备好：

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

.on()如果您想生动地注册，还请注意我用于该方法的正确重载：

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

另请注意，如果您想toggleSession在 AJAX 调用成功时调用该函数，则应使用该.load方法的成功回调。

Answer 2

您需要在 load 的回调中调用 toggleSession() ，否则内容可能尚未加载，因此您的选择器无法找到所需的元素。

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

Answer 3

代码似乎是正确的，但我过去遇到了一些问题on()。试试这个：

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

    setStateForStepButton();
});

此外，如果您尝试selected仅将类设置为a单击，我应该将您的代码重写为：

$(document).on('click', '.sched a', function () {
    $('.sched a').removeClass('selected');
    $(this).addClass('selected');

    setStateForStepButton();
});

正如yan.kun所说，在回调上调用函数load()