在JavaScript OnClick中模擬點擊事件會導致錯誤

Question

我正在使用<li>標記構建帶有某些選項的上下文菜單，如下所示。 我需要模擬另一個ID（圖像）上的click事件，當我選擇並從上下文菜單中單擊此選項時。我只能在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;
};

上面的代碼導致Uncaught SyntaxError：意外的標識符

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

如何擺脫這個問題？

Answer 1

使用委托事件

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

Answer 2

代碼的問題是，您嘗試傳遞對象引用和ID字符串，因此您要進行打印，因此JS無法打印和JS對象，因此它將打印引用[object Object]，因此您應該這樣做所以：

var reportId = targetId.substring(targetId.indexOf(':') + 1); //e.g. rpt1234
var reportIdFormed = '#' + reportId + 'run' + runReportLinkName; //e.g. rpt1234runHTML
result += '<li><a href="javascript:void(0);" style="text-decoration:none" onclick="handleTrigger(reportIdFormed)"> Run HTML </a></li>';

您的代碼JS

function handleTrigger(id) {
 var target = $(id);
 if (target.length) {
   target.trigger("click")
 }
}

Answer 3

嘗試這個

var reportId = targetId.substring(targetId.indexOf(':') + 1); //e.g. rpt1234
var reportIdFormed = reportId + 'run' + runReportLinkName; //e.g. rpt1234runHTML
result += '<li><a href="javascript:void(0);" style="text-decoration:none" onclick="(function(){document.getElementById(\''+ reportIdFormed+'\').trigger(\'click\'); })();"> Run HTML </a></li>';