CODEWITHSUNDEEP
javascriptjquery
ChilBud
ChilBud

Reputation: 195

Simulating click event inside JavaScript OnClick results in error

I am building a context menu with some options using <li> tags as shown below. I need to simulate click event on another ID (image), When i choose and click on this option from context menu.. I can only have the function instantaneous execution inside onclick as shown in below code-

Edited the code to give more clarity

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

Above code is resulting in Uncaught SyntaxError: Unexpected identifier

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

How to get rid of this issue?

Upvotes: 0

Views: 496

Answers (3)

madalinivascu
madalinivascu

Reputation: 32354

Use a delegated event

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

if the selector changes for each element then you need a attribute to store the selector:

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

Upvotes: 2

Haze
Haze

Reputation: 196

Try this

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

Upvotes: 1

Juorder Gonzalez
Juorder Gonzalez

Reputation: 1652

The problem with your code is that you are trying to pass and object referent instead and ID string, so you are printing that, so JS cannot print and JS object, so it will print the reference [object Object] so you should do it like so: 

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

Your code JS

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

Upvotes: 1

Related Questions