使用Ajax触发布局javascript函数到已加载的部分视图

时间:2018-03-29 12:57:34

标签: javascript jquery ajax asp.net-mvc

我有一个javaScript函数,在我的页面布局中按如下方式加载部分视图:

$('.follow-tasks').click(function (e) {
    e.preventDefault();
    var $followtaskList = $("#td-" + $(this).attr("data-id"));
    var t = $("#tr-" + $(this).attr("data-id"));
    t.is(":hidden") ? (t.show(),
        $followtaskList.load($followtaskList.data("url"))): t.hide();
});

onClick 事件显示模态对话框:

$('.data-form').click(function (e) {
    e.preventDefault();
    var title = $(this).attr("modal-caption");
    var url = $(this).attr("href");
    $.ajax({
        url: url,
        success: function (result) {
            $('#dataModal').modal('show');
        }
    });
});

加载部分视图后,对于.data-form类的代码, onClick 事件不会被触发。

如何让click事件处理程序$('.data-form').click(…)也处理延迟加载的局部视图?

1 个答案:

答案 0 :(得分:0)

$(document).on('click','.data-form',function (e) {
    e.preventDefault();
    var title = $(this).attr("modal-caption");
    var url = $(this).attr("href");
    $.ajax({
        url: url,
        success: function (result) {
            $('#dataModal').modal('show');
        }
    });
});

您必须将动态填充的元素绑定到dom