2

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.

1

3 Answers 3

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.

1

Here's what I use, which doesn't limit you to the addEventListener's lack of ability to use function parameters.

span.onclick = function(){ someFunction('here'); }
1

I was also searching for a solution to this and here is what I ended up with.
I have an empty div when the app is loaded.

<div id="left-list">
</div>

Then after loading is complete I use the event delegation code from here to catch clicks in the div and figure out what was clicked. In my case I'm adding buttons to the div with the class list-item.

$(document).ready(function(){
    $('#left-list').click(function(e){
    if( $(e.target).is('.list-item') )
        loadListItem(e);
    });
});

Now I can pull out the attributes I want and do stuff.

function loadListItem(e){
    var itemID = e.target.id;
    var source = $('#'+itemID).attr('src');
    alert(itemID + ' ' + source);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.