Блог

Привет, у меня есть сайт, который использует переключатель для выбора параметров. Если вы нажмете на саму кнопку, она не сработает (будет выбрана), но сработает, если вы нажмете на текст под кнопкой, мы будем признательны за любую помощь.

Кстати, как бы мне применить исправление только к IE9, поскольку все отлично работает в IE 6-8.

Это известная проблема с IE9?

Большое спасибо

хорошо, вот код, который устранил проблему для IE9, но теперь не работает для IE 8-6

 <script type="text/javascript">
    <!--
    $(function()
    {
        inClickFunc=false;

        var changeFunc = function()
        {
            if(!inClickFunc)
            {
                $(this).parent().click();
            }

            return false;
        };

        $("input[type=radio]").bind('change', changeFunc);
        $("input[type=radio]").bind('propertychange', changeFunc);

        $(".attinner").click(function()
        {
            inClickFunc=true;
            var input=$("input", this);

            $(".sub-values", $(this).parents(".middlecontent")).remove();

            if(input.attr("checked"))
            {
                input.attr("checked", false);
            }
            else
            {
                input.attr("checked", true);
                var div=this;

                $.get("/js/product_options.php", {product_id: 1130, value_id: $(input).attr("value")}, function(result)
                {
                    if(result)
                    {
                        $(div).parent().nextAll(".clear").eq(0).after(result);
                    }
                });
            }

            inClickFunc=false;
        });

        $('.sub-value').livequery('click', function()
        {
            $("input", this).attr("checked", true);
        });

        $("[name=product]").submit(function()
        {
            var submit=false;

            $.ajax(
            {
                type: 'POST',
                async: false,
                url: '/js/validate_product.php',
                data: $(this).serialize(),
                success: function(msg)
                {
                    if(msg.length==0)
                    {
                        submit=true;
                    }
                    else
                    {
                        submit=false;
                        alert(msg);
                    }
                }
            });

            return submit;
        });

        /*$(".middlecontent").each(function() {
            $options = $(this).find('.attinner');

            if($options.length == 1)
            {
                $options.click()
            }
        });*/
    });
    -->
</script><h2>Size (Height x Width x Depth)</h2>
<div class="middlecontent">
                <div class="attribute-wide">
        <div class="attinner">
                                                    <input type="radio" title="Values" name="values[23]" class="required" value="5325"><div class="attvalue">
            1981mm x 686mm x 35mm<br>78" x 27" x 1.38"<br><span class="size-price">(£109.00)</span>         </div>
        </div>
    </div>
                        <div class="attribute-wide">
        <div class="attinner">
                                                    <input type="radio" title="Values" name="values[23]" class="required" value="5324"><div class="attvalue">
            1981mm x 762mm x 35mm<br>78" x 30" x 1.38"<br><span class="size-price">(£109.00)</span>         </div>
        </div>
  

Правильный способ разрешить пользователю нажимать как на текст, так и на кнопку — использовать тег label с необработанным HTML, нет необходимости возиться с JavaScript или jQuery.

Попробуйте разметить свои кнопки следующим образом:

 <input id="radio1" type="radio" name="account" value="radiobutton" />
<input type="radio" title="Values" name="values[23]" class="required" value="5324" id="unique_identifier">
<label for="unique_identifier">1981mm x 686mm x 35mm<br />78" x 27" x 1.38"<br /><span class="size-price">(£109.00)</span></label>