Question

当用户点击按钮时，我正在创建一个标签，生成一个新标签。我希望当用户在此选项卡上单击一个类似于

的函数调用时

onclick('+reportname+','+report type+')

onclick("'+reportname+'","'+report type+'")

我试过两种方式，但功能不起作用

这是我的代码

 filename = $.trim($(elem).closest('td').find('.lblReportfileName').text());
 ReportType = $.trim($(elem).closest('tr').find('.ReportType').text());

 $(".ReportTiles").append('<div class="widgetsReportTiles"  style="background-color:#02a7f9b8;color:black" id="widgetsReportTilesId">' 
+ '<span class="reportType" onclick="OpenReportTab("'+filename+'","'+ReportType+'","")">' + filename + '</span>' 
+ '<span class="reportcloseicon" onclick="HideReportTile(this)">' + "x" + '</span>' + '</div>');

Answer 1

试试这个

$(".ReportTiles").on('click','.OpenReportTab',function(){
    filename = $.trim($(this).closest('tr').find('.lblReportfileName').text());
    ReportType = $.trim($(this).closest('tr').find('.ReportType').text());
    OpenReportTab(filename,ReportType)
})

并从追加

中移除onclick

Answer 2

您可以利用Template literals：

＆＃13;

var ReportType = 'rType';
var filename = 'fname';
var x = 'x123';

$(".ReportTiles").append(`<div class="widgetsReportTiles"  style="background-color:#02a7f9b8;color:black" id="widgetsReportTilesId"> 
<span class="reportType" onclick="OpenReportTab('${filename}','${ReportType}','')">${filename}</span>
<span class="reportcloseicon" onclick="HideReportTile(this)">${x}</span></div>`);

function OpenReportTab(f, r){
  console.log(f +'::::'+ r);
}
function HideReportTile(t){
  console.log(t.textContent);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ReportTiles"></div>

＆＃13;

如何调用附加内容的函数

2 个答案: