How to trigger a function from a button created by JQuery DataTables-CodePudding

I'm working on a marketplace project for my college class, and I had created some views fetching data from MSSQL database, using an API. In this particular view, customers have a table listing all content, and in the last column there is a buy button. I'm using C#/ASP.NET framework and JavaScript.

The problem is: this button never triggers the associated function (by now I have just a basic alert message, but the goal is to integrate with PayPal API). I've been struggling all day with this problem. Already tested the solutions below, with no success. Can someone show me a direction to overcome this issue? Really appreciate any help. I have little experience with JavaScript, still learning the fundamentals on the go. Besides, I've learned English as an adult, so I apologize if there are some phrases that don't make completely sense. Thanks in advance, really appreciate this community!

Customer view (HTML/C#-Razor)

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

<div >
    <h1 >HOME - @Session["RoleId"]</h1>
</div>
<br />
<br />

@{switch (Session["RoleId"])
    {
        case "consumidor":
            <div id="activeContentTable" name="activeContentTable">
                <table id="tblContent"  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 >
                <div >
                    <h2>Suscripciones</h2>
                    <p>
                        Las suscripciones compradas se listan resumidamente aquí
                    </p>
                    <p><a  href="#">Más detalles &raquo;</a></p>
                </div>
                <div >
                    <h2>Contenido</h2>
                    <p>
                        Los contenidos comprados se listan resumidamente aquí
                    </p>
                    <p><a  href="#">Más detalles &raquo;</a></p>
                </div>
                <div >
                    <h2>Otras informaciones</h2>
                    <p>
                        Otras opciones se listan resumidamente aquí
                    </p>
                    <p><a  href="#">Más detalles &raquo;</a></p>
                </div>
            </div> break;
    }
}

Customer controller option #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" >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();
})

Customer controller option #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" >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();
})

CodePudding user response：

After compiling all this information, I had a better grasp about the problem and solved it!

The issue was the "dataTable" call, should be capitalized in the line 23 ( var table = $('#tblContent').DataTable({) ). As simple as that.

CodePudding user response：

Try this,

Custom - button - created by Jquery Datatable https://datatables.net/extensions/buttons/examples/initialisation/custom.html

Adding - Removing - Data https://datatables.net/extensions/buttons/examples/api/addRemove.html