jQuery脚本在Webkit浏览器上不起作用

Question

i've got this code working on mozilla, but ain't working on webkit browsers.

it's simple script, click on an with an assigned value, and shows an image. then the other 's, get disabled attr.

can anyone help me to undertood why it's not working in webkit.

info: it's for a FB app, working on shortstack

Thanks

THE CODE:

<script type="text/javascript">
$(document).ready(function() {

$('#image,#image2,#image3,#image4,#image5').hide();

    $('option').click(function(e) {
    switch ($(this).attr('value')) {

      case 'ATENTA': 
        $("#image").show().click(function(){
            $(this).hide();
        });
        e.preventDefault();
        break;

      case 'CREATIVA':
        $("#image2").show().click(function(){
            $(this).hide();
        });    
        e.preventDefault();
        break;  

      case 'COQUETA':
        $("#image4").show().click(function(){
            $(this).hide();
        });        
        e.preventDefault();
        break;

      case 'PEGOTE': 
        $("#image3").show().click(function(){
            $(this).hide();
        });     
        e.preventDefault();
        break;

      case 'COLGADA':
        $("#image5").show().click(function(){
            $(this).hide();
        });    
        e.preventDefault();
        break;  
    }
    });

    $('select').change(function(){
    var value = $(this).val();
    $(this).children('option').each(function (){
      if ($(this).val() === value) {
          $(this).siblings('option').attr('disabled', true);
      }
        });
    });

});

Answer 1

I'm guessing that what's not working is the actual load of images. I'd think this is because of this bit of code:

$('option').click(function(e) {

Browsers handle form elements differently. Clicking on an option from a select might trigger the 'click' event for firefox, but not on Chrome, for example.

Try something like this:

$(document).ready(function() {

    $('#image,#image2,#image3,#image4,#image5').hide();


    $('select').change(function() {
        var value = $(this).val();

        $(this).children('option').each(function (){
            if ($(this).val() === value) {
                $(this).siblings('option').attr('disabled', true);
            }
        });

        switchImage(value);
    });

    var switchImage = function(toLoad) {
        switch (toLoad) {

          case 'ATENTA':
            $("#image").show().click(function(){
                $(this).hide();
            });
            break;

          case 'CREATIVA':
            $("#image2").show().click(function(){
                $(this).hide();
            });
            break;

          case 'COQUETA':
            $("#image4").show().click(function(){
                $(this).hide();
            });
            break;

          case 'PEGOTE':
            $("#image3").show().click(function(){
                $(this).hide();
            });
            break;

          case 'COLGADA':
            $("#image5").show().click(function(){
                $(this).hide();
            });
            break;
        }
        });
    };

});

What this is doing is using the 'change' event on the select tag itself to call the switchImage function, rather than depending on the 'click' event on the option tag.