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

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 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;
    }
}

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" 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();
})

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" 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();
})