javascript - Catching SyntaxError caused by bad JS loaded via jQuery.load() -

i have javascript control loads page containing html , javascript needed page.

initially operated under yagni/kiss assumptions , kept javascript in single large functions.js file; number of pages has grown, , moreover, several of them variations need different instantiations of same functions.

so find useful able write

 <div>...<button id="object123">don't click me!</button>... </div>  <script>      $('#object123').on('click', function(){          alert("i said not click!");      });  </script> 

and load with

 // error checking omitted clarity  $(divselector).load('page-with-object-123.html'); 

given have checks in place uniqueness of ids et cetera, problem arises if the script contains syntax error. in case of course execution stops, what's more, error inside jquery (the point .load executes <script> tag). not immediate track down error originating html.

i am able error (for matter syntax error in scripts intentional), i'd catch in order handle gracefully.

i have tried obvious try/catch

try {     $(divselector).load(sourcehtml); } catch (err) {     alert("an error occurred in " + sourcehtml); } 

but error isn't caught. this answer suggest should have been, unless jquery weird try/catch mechanism.

i have tried using window.onerror suggested this other answer. in default incarnation it works (i.e. define onerror callback globally).

at point tried effect change in function body itself, , have handler restored once no longer needed.

while tantalizingly appeared have worked once (possiby because looking @ older, global version of code due client caching), can't seem make work.

i was careful ^{after mandatory facepalm} restore handler after call had been issued.

/**  * effect call   * @param string    op*        command  * @param dict      data       data send  * @param callable  callback   function called on success   * @param callable  onerror    function called on failure  */ function poster(op, data, callback, onerror) {     // save handler     var orighandler = window.onerror;     // install new error handler     window.onerror = function(message, url, linenumber) {         alert(message + "\n" + url + "\n" + linenumber);         return true;     };     $.post(         ajaxurl,         $.extend({ op: op }, data),         function (responsetext, statustext, jqxhr) {             // evaluate response server error notifications             var todo = jqbadresponse(responsetext) ? onerror : callback;             // edit: try using onerror watch callbacks.             // window.onerror = orighandler;             todo && todo(responsetext);             // restore error handler             window.onerror = orighandler;         }     ).fail(function(jqxhr, title) { // outer failure.         // restore error handler         window.onerror = orighandler;          jqcheckfail(jqxhr, title); // notify of error     }); } 

i know what basic problem is... don't know, where in case.

the usual side-effect of checking requirements posting sensible question on stack overflow -- you stumble on answer.

as said, used function load html div. above function i differently. actual assignment no longer done jquery in .load() but own callback.

and jquery interpret javascript , throw syntaxerror in .html() call, not in .load() call anymore. inside .load function, loaded html code string, , whatever syntax errors contains ignored.

it's when tell jquery consider string html , place in dom exception thrown. does happen while i'm inside .post function, happens farther down in scope.

i still don't quite understand why outer try {} failed catch it, i'm reasonably confident may have fact that

try (     var = ...*some promise payload executed sometime in near future*... } catch (e) {     // here catch error , there no error;     // promise did promise impossible,     // offer hasn't been picked yet. } ... // promise executes , throws. i'm no longer inside // try/catch block. 

indeed if place try/catch in synchronous block

poster(     'form',     {         code:  ...,         id:    ...     },     function (responsetext) {         try {             $('#details').html(responsetext.data.html);         } catch(e) {             alert("gotcha");                             return;         }         ...     } ); 

the exception correctly caught.