Question

我有一个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(…)也处理延迟加载的局部视图？

Answer 1

试

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

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

1 个答案: