CODEWITHSUNDEEP
jqueryjquery-ui
dragboatrandy
dragboatrandy

Reputation: 99

jquery show()/Hide() not firing after first click

I can't figure out why this script will not fire after the first click event. The show() function works perfectly, but the hide() will not work.

<script type="text/javascript">
$(document).ready(function() {
    $(".event.hidden").click(function () {
      var div_id = this.id.replace(/But/, 'Div');
      $("#" + div_id).show('slow', 'linear'); 
      $(this).attr("src", "images/but_hide_event.png");
      $(this).removeClass('hidden').addClass('shown');  
    });
    $(".event.shown").click(function () {
      var div_id = this.id.replace(/But/, 'Div');
      $("#" + div_id).hide('slow'); 
      $(this).attr("src", "images/but_event_info.png");
      $(this).removeClass('shown').addClass('hidden');
    });
});
</script>

The page in question is at http://randykrohn.com/schedules.php?Param=all

Upvotes: 1

Views: 1787

Answers (2)

Ken Redler
Ken Redler

Reputation: 23943

The problem is that you're attaching behavior to the click event of elements with class event and shown when the DOM first becomes ready. That is, once, on page load. But it looks like there are no elements with .event.shown at that time, since you're only swapping in the shown class after that first click event on elements with .event.hidden.

You should reconsider your approach -- or if you can't, you'll need to use .live() or .delegate() to watch for changes and dynamically attach new behavior to these click events.

Upvotes: 2

macca1
macca1

Reputation: 9681

You need to use the .live() method. On document ready you are binding to .event.hidden but it doesn't match any elements. Once you run the show function, you'd need to rerun that selector. More simply, you can use .live():

Description: Attach a handler to the event for all elements which match the current selector, now and in the future.

Change it to

$(".event.hidden").live('click', function () { ...

and if you want to then be able to use the show again, you'll want to do this one too...

$(".event.shown").live('click', function () { ...

Upvotes: 2

Related Questions