Clever Geek Handbook

Using jQuery, onclick events, and Adobe AIR

I am creating an Adobe AIR application with a little jQuery to dynamically change the display of the application. The display portion includes links with Javascript functions in the onclick event, except in the app the onclick is ignored when the div is rendered by jQuery. I have confirmed that onclick works fine when it is part of the original HTML, and jQuery (in the browser) is usually able to add HTML that triggers the onclick event. Any idea why Adobe AIR is causing it to gasp?

It is not the same situation, but here is a similar report .

+2


source to share


3 answers


There are several things I had to do to get this to work. First, when dynamically generating the HTML, I assigned a unique class to all the elements that I wanted to make interactive (and mimic the onclick behavior). After the display was generated, I pulled all the pages on the page as such:

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

and then iterate through them, adding an event listener to where I needed the interactive 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, it gives me the ability to assign a function whenever there is a click event on one of those gaps. Unfortunately, I also wanted to pass variables to my functions. I ended up having to encode the elements in an element, in pseudo-RDF, and then decode it in a function. For example, if I added "data: url =" http://www.google.com/ "", I would restore 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);
}

TA-dah. A hacky way to re-enable the onclick event in Adobe AIR.

+1


source


This is what I am using, which does not limit you if addEventListener can use functional parameters.



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


source


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

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

Then after the download completes, I use the event delegation code from here to catch the clicks in the div and figure out what was clicked. In my case, I am adding buttons to a div with a class list element.

$(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 something.

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


source






More articles:


All Articles