如何從由 JQuery DataTables 創建的按鈕觸發 function

Question

我正在為我的大學 class 開發一個市場項目，我使用 API 創建了一些從 MSSQL 數據庫中獲取數據的視圖。 在這個特定的視圖中，客戶有一個列出所有內容的表格，最后一列有一個購買按鈕。 我正在使用 C#/ASP.NET 框架和 JavaScript。

問題是：這個按鈕永遠不會觸發相關的 function （現在我只有一個基本的警報消息，但目標是與 PayPal API 集成）。 我整天都在為這個問題苦苦掙扎。 已經測試了以下解決方案，但沒有成功。 有人可以告訴我克服這個問題的方向嗎？ 非常感謝任何幫助。 我對 JavaScript 的經驗很少，仍在學習 go 的基礎知識。 此外，我作為成年人學習過英語，所以如果有一些不完全有意義的短語，我深表歉意。 在此先感謝，非常感謝這個社區！

客戶視圖 (HTML/C#-Razor)

@{
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/Views-js/Index.js"></script>

<div class="jumbotron">
    <h1 class="text-center">HOME - @Session["RoleId"]</h1>
</div>
<br />
<br />

@{switch (Session["RoleId"])
    {
        case "consumidor":
            <div id="activeContentTable" name="activeContentTable">
                <table id="tblContent" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Price</th>
                            <th>Type</th>
                            <th>Tags</th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div>
                <button id="btnBuy">Comprar</button>
            </div>

            <br /><br /><hr /><br /><br />

            <div class="row">
                <div class="col-md-4">
                    <h2>Suscripciones</h2>
                    <p>
                        Las suscripciones compradas se listan resumidamente aquí
                    </p>
                    <p><a class="btn btn-primary" href="#">Más detalles &raquo;</a></p>
                </div>
                <div class="col-md-4">
                    <h2>Contenido</h2>
                    <p>
                        Los contenidos comprados se listan resumidamente aquí
                    </p>
                    <p><a class="btn btn-primary" href="#">Más detalles &raquo;</a></p>
                </div>
                <div class="col-md-4">
                    <h2>Otras informaciones</h2>
                    <p>
                        Otras opciones se listan resumidamente aquí
                    </p>
                    <p><a class="btn btn-primary" href="#">Más detalles &raquo;</a></p>
                </div>
            </div> break;
    }
}

客戶 controller 選項 #1（Javascript）

//Controlador JS de la vista Index.cshtml

function IndexView() {

    this.ViewName = "IndexView";
    this.ApiUrl = "";

    this.InitView = function () {
        this.LoadTable();

        $("#btnBuy").click(function () {
            var view = new IndexView();
            view.BuyProduct();
        });
    }

    this.LoadTable = function () {
        var arrayColumnsData = [];
        arrayColumnsData[0] = { 'data': 'Id_Content' };
        arrayColumnsData[1] = { 'data': 'Name' };
        arrayColumnsData[2] = { 'data': 'Description' };
        arrayColumnsData[3] = { 'data': 'Price' };
        arrayColumnsData[4] = { 'data': 'Type' };
        arrayColumnsData[5] = { 'data': 'Tags' };
        arrayColumnsData[6] = { 'data': null, 'defaultContent': '<button id="btnBuy" class="btnBuy">Comprar!</button>' }

        $('#tblContent').dataTable({
            "ajax": {
                "url": "https://localhost:44359/api/content/retrieveall",
                "dataSrc": "Data"
            },
            "columns": arrayColumnsData,
        });
    }

    this.BuyProduct = function () {
        alert("comprar producto");
    }
}


//Instanciamiento inicial, esto se ejecuta cuando la página termina de cargar
$(document).ready(function () {
    var view = new IndexView();
    view.InitView();
})

客戶 controller 選項 #2 (Javascript)

function IndexView() {

    this.ViewName = "IndexView";
    this.ApiUrl = "";

    this.InitView = function () {
        this.LoadTable();

    }

    this.LoadTable = function () {
        var arrayColumnsData = [];
        arrayColumnsData[0] = { 'data': 'Id_Content' };
        arrayColumnsData[1] = { 'data': 'Name' };
        arrayColumnsData[2] = { 'data': 'Description' };
        arrayColumnsData[3] = { 'data': 'Price' };
        arrayColumnsData[4] = { 'data': 'Type' };
        arrayColumnsData[5] = { 'data': 'Tags' };
        arrayColumnsData[6] = { 'data': null, 'defaultContent': '<button id="btnBuy" class="btnBuy">Comprar!</button>' }

        var table = $('#tblContent').dataTable({
            "ajax": {
                "url": "https://localhost:44359/api/content/retrieveall",
                "dataSrc": "Data"
            },
            "columns": arrayColumnsData,
        });

        $('#tblContent tbody').on('click', '#btnBuy', function () {
            var dataRow = table.row($(this).parents('tr')).data();
            alert("Nombre del producto: " + dataRow[1]);
        });
    }
}


//Instanciamiento inicial, esto se ejecuta cuando la página termina de cargar
$(document).ready(function () {
    var view = new IndexView();
    view.InitView();
})

Answer 1

整理了所有這些信息后，我對問題有了更好的了解並解決了！

問題是“dataTable”調用，應該在第 23 行大寫（ var table = $('#tblContent'). DataTable ({) ）。 就如此容易。

Answer 2

嘗試這個，

自定義 - 按鈕 - 由 Jquery 創建 數據表https://datatables.net/extensions/buttons/examples/initialisation/custom.html

添加 - 刪除 - 數據https://datatables.net/extensions/buttons/examples/api/addRemove.html