javascript - 在 JavaScript OnClick 中模拟单击事件会导致错误

Question

我正在使用 <li> 构建一个包含一些选项的上下文菜单标签如下所示。我需要在另一个 ID(图像)上模拟单击事件，当我从上下文菜单中选择并单击此选项时。我只能在 onclick 内立即执行该函数，如下面的代码所示 -

编辑代码以使其更加清晰

var functionMain = function ContextMenu$functionMain(items, targetId) {
    $(menu).html(buildItems(items, targetId));
};

var buildItems = function ContextMenu$buildItems(items, targetId) {
    var i, result;
    result = '';
    for (i = 0; i < items.length; ++i) {
        var reportId = targetId.substring(targetId.indexOf(':') + 1);
        var reportIdFormed = $('#' + reportId + 'run' + runReportLinkName);
        result += '<li><a href="javascript:void(0);" style="text-decoration:none" onclick="(function(){'+ reportIdFormed+'.trigger(\'click\'); })();"> Run HTML </a></li>';
    }
    return result;
};

以上代码导致未捕获的语法错误:意外的标识符

生成的 HTML --> <a href="javascript:void(0);" style="text-decoration:none" onclick="(function(){[object Object].trigger('click'); })();">Run HTML</a>

如何解决这个问题？

Answer 1

使用委托(delegate)事件

var reportId = targetId.substring(targetId.indexOf(':') + 1); 
var reportIdFormed = $('#' + reportId + 'run' + runReportLinkName);

result += '<li><a href="javascript:void(0);" style="text-decoration:none" class="delegated-event"> Run HTML </a></li>';//add a class 

$('body').on('click','.delegated-event',function(){ //delegate the event based on that class
   reportIdFormed.trigger('click');
})

如果每个元素的选择器发生变化，那么您需要一个属性来存储选择器:

var reportIdFormed = '#' + reportId + 'run' + runReportLinkName;//make it a string

    result += '<li><a href="javascript:void(0);" style="text-decoration:none" class="delegated-event" data-selector="'+reportIdFormed+'"> Run HTML </a></li>';//add a class 

$('body').on('click','.delegated-event',function(){ //delegate the event based on that class
       reportIdFormed = $($(this).attr('data-selector'));//get the selector
       reportIdFormed.trigger('click');
    })