Question

I have some markup that looks like this:

<a href="#" class="someButton">
   <span class="play">play</span>
</a>

When I click play, the markup changes to this:

<a href="#" class="someButton">
   <span class="stop">stop</span>
</a>

I am binding to the parent link, which is always there, just the class of the child element changes. How do I do this with .live()?

This is my current code

$('.play').parent('a').live('click', function() {
    console.log('PLAY');
});

// stop
$('.stop').parent('a').live('click', function() {
    console.log('stop');
});

I should also note that I dont have control over the markup changing as its a 3rd party video player but someone higher up in the organization.

Answer 1

$('.someButton').live('click', function(){
    if ( $(this).find('.stop').length ) {
        console.log('stop');
    } else if ( $(this).find('.play').length ) {
        console.log('play');
    }
});