觸發布局javascript函數以使用Ajax加載部分視圖

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