jquery hover options then click to load page

Question

My problem:

I have a row of div tags that act as header to columns when the user hovers over them the div changes to sort options such as ASC and DESC. What i need them to do is when the user clicks on one of the options an alert will pop up with the click option the value and the div class name.

example if the user clicked on ASC an alert would pop up saying headerID ASC 1 or headerID DESC 2 if clicked on desc.

For the life of me I can not figure this out. Right now I'm testing with alert then I will be using .load() to load a page with sorting option

div = headerID

sort = ASC

value = 1

or

div = headerID

sort = DESC

value = 2

depending on what was clicked.

demo of what I already have http://jsfiddle.net/hmeHn/1/

Answer 1

here one of many possible soloutions

http://jsfiddle.net/eQJSU/2/

Answer 2

I would make ASC and DESC text into links with click actions associated with each of them. Then, in the click callback, provide your actions:

    $(this).html('<span id="sortShow">\
                 <a href="#" class="asc">ASC</a> | \
                 <a href="#" class="desc">DESC</a></span>');
    $(this).on('click', 'asc', function(e) {
        e, preventDefault();
        alert('Ascending');
    }).on('click', 'desc', function(e) {
        e, preventDefault();
        alert('Descending');
    })

This is just a rough example. Also, I would recommend against using regex's in your jQuery selectors since they are significantly slower than other selectors. div[class*=header] is not good. Try using another class instead to distinguish your headers.

Answer 3

something like this?

http://jsfiddle.net/hmeHn/6/