Question

I’m building an Adobe AIR application with a bit of jQuery to dynamically change the display of the application. Part of the display includes links with Javascript functions on the onclick event except, in the application, onclick is disregarded when the div has been manipulated by jQuery. I’ve confirmed that onclick works fine when it’s a part of the original HTML, and jQuery (in a browser) is normally capable of adding HTML that includes the onclick event. Any idea why Adobe AIR causes it to choke?

It isn’t the exact same situation, but here’s a similar report.

Answer 1

There are a couple of things I had to do in order to get this to work. First, when dynamically generating the HTML, I assigned a unique class to all of the elements I wanted to make clickable (and simulate the onclick behavior). After the display had been generated, I pulled all spans on the page as such:

var span = document.getElementsByTagName('span');

and then iterated through them, adding an event listener to the ones where I needed a clickable action:

for(var i=0; i<span.length; i++){
if (span[i].className == "firstUniqueClass") {
    span[i].addEventListener("click", firstUniqueFunction, false);
} else if (span[i].className == "secondUniqueClass") {
    span[i].addEventListener("click", secondUniqueFunction, false);
}
}

In short, what this gives me is the ability to assign a function whenever there’s a click event on one of those spans. Unfortunately, I also wanted to pass variables to my functions. I ended up having to encode those in the element, in pseudo-RDF, and then decoding it in the function. For instance, if I added ‘data:url=”http://www.google.com/”‘, I’d regenerate it as such:

function copyLink(event) {
    var startPos = event.currentTarget.outerHTML.indexOf('data:url="') + 10;
    var endPos = event.currentTarget.outerHTML.indexOf('"', startPos + 2);
    var link = event.currentTarget.outerHTML.slice(startPos, endPos);
}

Tada. A hackish way to reenable the onclick event in Adobe AIR.