botón que activa la llamada ajax y desea obtener atributos asíncronos

 <button class="p-4 next-page-loader" async-url="myurl" async-data="{'username':'QuandaleDingle'}"> Get Next Page </button>

mi index.js vinculado con html

 function getNextPageFunction(){ console.log('function started'); //works fine print(this.attr('async-url')); $.ajax({ url: this.attr('async-url'), data: this.attr('async-data'), dataType: "json", error: function(rdata){ console.log(rdata); }, success: function(rdata){ console.log(rdata); }, }) }; $(document).ready(function(){ console.log('start async'); //working fine console.log($(".next-page-loader").attr('class')); //working fine $(".next-page-loader").on("click", getNextPageFunction); //when-clicked-on-button-raises-error console.log("end async"); //working fine })

el error en la consola

 Uncaught TypeError: this.attr is not a function at HTMLButtonElement.getNextPageFunction (index.js:9:16) at HTMLButtonElement.dispatch (jquery-3.6.0.min.js:2:43064) at v.handle (jquery-3.6.0.min.js:2:41048)

También intenté pasar this como una entrada de función, tampoco funcionó, plantea el mismo problema