Uncaught SyntaxError: Invalid flags provided to RegExp 'Capture' constructor

Question

$("#test_point_geck_info") .html("<div id='img_1' class='img_1'>" + "<img src = " + ROOT_PATH + "/assets/Capture.PNG onclick=PopImage(" + ROOT_PATH + "/assets/Capture.PNG,'xyz')" + " style='cursor:pointer;' class=thumbnail width='100' height='100'></div>"); 

Results in browser:

 <img src="/assets/Capture.PNG" onclick="PopImage(/assets/Capture.PNG,'xyz')" style="cursor:pointer;" class="thumbnail" width="100" height="100"> 

caller:

 function PopImage(imagesrc,caption) { var PopupImageContainer = new Image(); PopupImageContainer.src = PopupImageSRC; setTimeout("PopupImageDisplay()",loadDelay); } 

Answer 1

/assets/Capture.PNG interpreted as a regular expression (for assets ) with Capture.PNG as flags - which are invalid. You need a line: '/assets/Capture.PNG' .

In any case, you should not use the attributes of the inline event handler, especially if you already have jQuery. It is better:

 $("#test_point_geck_info").html('<div id="img_1" class="img_1">' + '<img src = " + ROOT_PATH + "/assets/Capture.PNG" title="xyz" ' + 'class="thumbnail" width="100" height="100"></div>').find("img").click(PopImage); 

 function PopImage(e) { var imagesrc = this.src, caption = this.title; var PopupImageContainer = new Image(); PopupImageContainer.src = PopupImageSRC; PopupImageContainer.onload = function() { PopupImageDisplay(PopupImageContainer, PopupImageCaption, PopupImageSRC); }; } 

 .thumbnail { cursor: pointer; } 

Answer 2

This happened to me when it is incorrect to put some codes between javascript