内联事件处理程序与单独的JavaScript文件中的事件处理程序混淆

Question

Could something in the code of an inline event handler like in the HTML markup affect some code or prevent it from firing code in a JavaScript file that is later called. Suppose the JavaScript file contained something like this.

$(a).click(function() {
//some code
 }

someJavaScriptCode isn't meant to be valid JavaScript syntax. It is generated by the PrimeFaces library.

My event handler in the JavaScript file works once, but any subsequent clicks after that; it doesn't fire. The code in the inline event handler still works however. I didn't make up the inline code; it was web application's UI library doing that. I'm just wondering how I can make the code above still work.

Answer 1

If your inline code has an error in it, and it is executed before the JavaScript in your javascript file, then it will halt javascript execution which would prevent your external file javascript from running.

I hope this helps.

Answer 2

Are you using a framework that re-renders your DOM? It seams that when you click the element, it is replaced and it looses the event that is applied in your JavaScript file.

If that is the case, place your event on a parent that is not being re-rendered, and target the element this way:

$( parent ).on( 'click', 'a', function (e) {})

The second argument in the "on" method will target any selector and apply the click even, even if the content of the parent is refreshed.