Overriding a javascript function in a Wordpress Child Theme

Question

I am writing a simple Wordpress child theme.

There is a portfolio feature which uses flexslider to display the thumbnail from the most recent posts and, when clicking on them, it uses ajax to open up the post content in a div on the page.

I have written a category page based on this, which pulls out all the post categories and displays the thumbnail for the most recent post. However, when I click on the thumbnail, I need the page to go to a new page and not open up in the content div.

The problem is, I am reusing code which looks a bit like this:

<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <div class="flexslider">
            <ul class="slides">
                <li>
                    <a href="http://the-url-here">
                        <img src="<?php  echo $thumb[0]; ?>" />
                    </a>
                </li>
            </ul>
    </div>
<?php endwhile; ?>

But there is custom js within the parent theme global footer as follows which handles the opening up of the content, rather than redirecting to the location specified in the tag as usual.

$(".flexslider ul.slides li a").live('click', function(e){ e.preventDefault();

   /*Set Function Variables */       
    $this = $(this);
    $selectedthing = $this;
    $postId = $($this).attr('data-url');

    // and so on...

    return false; 
});

So, I need to disable the javascript attached to .flexslider ul.slides li a on that one single page template only , preferably without having to change the classes, as I think thatwould open up another can of worms around the css. Remember the theme loads the javascript in the footer, so I assume any changes Imake in the page template will be overridden in the footer.

Any ideas on the best way to approach this?

Answer 1

Just remove click live listener in your child theme. Add this javascript only for that specific page template.

$(".flexslider ul.slides li a").die('click');