$(document).ready(function () {
var from='2022-02-21';
var to='2022-02-25';
var category ='rt';
var btndiv = '<div class="col-12 text-right">\
<input type="button" value="Generate Invoice" id="btngenerateinvoice" onclick="generateinvoice('+ from + ',' + to + ',' + category + ')" class="btn btn-blue btn-sm" /></div>';
$(".btndiv").append(btndiv);
});
function generateinvoice(ff, tt, cc) {
alert("helo");
var f = ff;
var t = tt;
var c = cc
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row btndiv">
</div>I pass three-parameter on onclick generateinvoice function dynamically but generateinvoice these function not called
The problem is that the values inside onclick="generateinvoice when they are rendered, the code thinks it's variables and those have not been defined. You can add \' in front and after each variable.
so you can do onclick="generateinvoice(\''+ from + '\',\'' + to + '\',\'' + category + '\')"
Without the \' the rendered code could look like generateinvoice(from,to,category), but when you add those the code will render the variables as string,s so it looks like generateinvoice('from','to','category')
Demo
$(document).ready(function() {
var from = "f",
to = "t",
category = "cc";
var btndiv = '<div class="col-12 text-right">\
<input type="button" value="Generate Invoice" id="btngenerateinvoice" onclick="generateinvoice(\''+ from + '\',\'' + to + '\',\'' + category + '\')" class="btn btn-blue btn-sm" /></div>';
$(".btndiv").append(btndiv);
});
function generateinvoice(ff, tt, cc) {
alert("helo");
var f = ff;
var t = tt;
var c = cc
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row btndiv">
</div>