Question

I am trying to make a simple user click action recorder in jquery but am having some trouble. I want the user to click a record button then once clicked record what he clicks on. Then press stop button to stop recording.
What I have so far is:

var stack = new Array();
var recordmode = false;

$('#record').click(function(){
recordmode = true;
alert('You are now in record mode');
});

$('#stop').click(function(){
recordmode = false;
console.log(stack);//output what's in the array
stack = []; //erase the array
});


$('#note_markers').click(function(){
if(recordmode){
$('.one_0').click( function(){ stack.push('one_0'); })
$('.one_1').click( function(){ stack.push('one_1') ; })
}
});

and later the start and stop buttons.

<a id='record'>R</a>
<a id='stop'>stop</a>
                           <div id="one_notes">
                                <a class="one_0"></a>
                                <a class="one_1"></a>
                                <a class="one_2"></a>
                                <a class="one_3"></a>
</div>

Also before stopping and erasing the array..I would like to build a URL in the form of /one_0/one_1/one_0 etc with what was in recorded in the array. (haven’t got to that part yet though)

What happens is the first click is not recorded and after that it starts putting in two of the same element. I can’t figure out why I am getting the current behavior.

Any ideas?

As a side note is there a way to get the name of ANY clicked element?

Answer 1

You’re issue is you are getting a click from #note_markers and a click from .one_1 as it bubbles up.

Try this:

$('#note_markers a').click(function(){
    if(recordmode)
        stack.push($(this).attr('class'));
});

You can alter your event listener to listen on whatever it is you actually need, but this will do what you want based on the supplied html