jQuery Forum

1. <div class="smallImage">
2.     <img src="http://placehold.it/150x150" />
3. </div>

1. $('.smallImage').click(function() {
2.     $(this).toggleClass('smallImage bigImage');
3. });

Here it is in action - http://jsfiddle.net/jayblanchard/5j8aJ/4/

Here is where I got into a bit of confusion: it would seem to me that when you click once, causing the element to lose the smallImage class that any subsequent click would not work (and that your selector would have to be different) because you're clicking on an element that no longer has that class.

However, I understand that all selectors are performed at run-time, so those elements retain their characteristics. I would just like to understand the mechanics of this a little more so I have been looking at jQuery's source. Nothing has jumped out at me yet - can someone point me in the right direction?

1. <ul class="sideNav">
2.     <li>
3.         <div></div>
4.         <a data-page="PAGE_100100007">Significance</a>
5.     </li>
6.     <li>
7.         <div></div>
8.         <a data-page="PAGE_100100008">Relevance</a>
9.     </li>
10.     <li data-sub="yes">
11.         <div class="arrow-right"></div>
12.         <a data-page="PAGE_100100009">Instruction</a>
13.         <ul class="subNav">
14.             <li>
15.                 <a data-page="PAGE_100100010">Overview</a>
16.             </li>
17.             <li>
18.                 <a data-page="PAGE_100100011">1a - LOC</a>
19.             </li>
20.         </ul>
21.     </li>
22. </ul>

1. $('.additionalInfo li').click(function() {
2.     var thisPopup = $(this).data('id');
3.     $('.popup').not('.popup[data-info="' + thisPopup + '"]').fadeOut(250, function(){
4.         $('.popup[data-info="' + thisPopup + '"]').fadeIn(350);
5.     });
6. });

1. $('#navContainer, #navShindigs, #navTidbits, #navBarnburners, #navLegend, #shindigs, #recipeForm').localScroll({
2.         target: '#contentViewport',
3.         easing: 'easeOutSine'
4. });

I have the following very simple code snippet which is loaded from a separate file into one jQuery Mobile page in a single page (each page stands alone) site that I am building:

$(document).bind('pageinit', function(){
    $('select[name="state_choice"]').change(function(){
        var thisState = $(this).val();
        var indexState = '#' + thisState;
        $('.state').hide();
        $(indexState).show();
    });
})

It was working but now it only works when I reload the page. I was examining the page load with Firebug and it was not consistently loading the jQuery file because this link was not showing up until reload.

<script src="inc/jquery/belmont.custom.js"></script>

Typically the console will show when a new page is called in jQuery mobile but I did find that this particular page did not always show up in the console log when a link to it was clicked. I have tested on a desktop simulator (Dashcode's iOS Simulator), in desktop browsers (FF and Safari) and on my iPhone all with the same results.

Has anyone ever seen this behavior? How can I make sure that this works consistently?

I have added console.log(indexState) to the function and this does not fire consistently either. Do I have to load the custom file into every page, or can it just be loaded into the pages that require it.

1. $('#modal').load('forms/eprice.html', function(){
2.       $(this).fadeIn();
   
3. });

1. $('#modalShade').live('click', function(event) {
2. console.log('shade clicked');
3. });

1. $('#modalShade').on('click', function(event) {
2. console.log('shade clicked');
3. });

1. <div id="modalShade"></div>