1

奇妙なことが起こっています。これを解決する方法が本当にわかりません。また、グーグルで検索しても有用なものは見つかりませんでした。

これを含むhtmlフォームがあります：

<label for="gebied">Gebieden</label>
<div class="button button-selected"><input type="checkbox" name="areas" value="nederland" checked="checked" />Nederland</div>
<div class="button button-selected"><input type="checkbox" name="areas" value="europa" checked="checked" />Europa</div>
<div class="button button-selected"><input type="checkbox" name="areas" value="wereld" checked="checked" />De Wereld</div>

次に、javascript (jQuery) を使用して、チェックされているものとされていないものを確認します。

var areas = [];
$('input[name=areas]:checked').each(function(){
areas.push($(this).val());
 });

これはcreateShortUrl();、関連するコードの下の内から呼び出されます。

$(function() {
    //Handle things when a buttons is clicked
    $("div.button").click(function() {
        //Find the input field for the clicked div
        var input = $(this).find(':input');
        var inputName = $(input).attr('name');
        //Handle checkboxes, which define the gebied
        if ($(input).is(':checkbox')) {
            //Change the classes
            input.prop('checked', !input[0].checked);
            $(this).toggleClass('button-selected');
        }
        //Handle radio
        if ($(input).is(':radio')) {
            $('form').find('input[name=' + inputName + ']').each(function() {
                $(this).parent('div').toggleClass('button-selected');
                $(this).prop('checked', !input[0].checked);
            });
        }
        //Clicking means something chanhes; create a new short url
        createShortUrl();
    });
});

奇妙なことに、Firefox の場合、以前にそれらのいくつかをチェックしたときに、それらは area 配列にとどまっています。それらのいくつかのチェックを外しても、それらは配列に残り、逆もまた同様です。しかし、Safari でデバッグするときは、魅力的に機能します。

その後、すべてのチェックを外すと、配列は空になります。一部を再確認し、配列内にあります。

では、何かアイデアがあれば、Firefox で何が起こっているのでしょうか? 以前の配列を数回更新した後でも、FFがキャッシュしているようです。私にもかかわらず

var エリア = []

私はそれを空にして再構築することを望んでいました....

ここでライブです。下部の大きなボタンをクリックすると起動します。

どんな考えでも大歓迎です！

4

2 に答える 2

1

問題はイベント ハンドラーにあります。問題は、要素の状態を変更する方法が Firefox では機能しないことです。状態を変更するattr()代わりに使用する必要があります。prop()checked

作業コード:に置き換えられ.prop()ます.attr()。

//Handle things when a buttons is clicked
$("div.button").click(function() {
    console.log("Click");

    //Find the input field for the clicked div
    var input = $(this).find(':input');
    var inputName = $(input).attr('name');

    //Handle checkboxes, which define the gebied
    if ($(input).is(':checkbox')) {
        //Change the classes
        console.log("check");
        input.attr('checked', !input[0].checked);
        $(this).toggleClass('button-selected');
    }

    //Handle radio
    if ($(input).is(':radio')) {
        $('form').find('input[name=' + inputName + ']').each(function() {
            $(this).parent('div').toggleClass('button-selected');
            $(this).attr('checked', !input[0].checked);
        });
    }
    //Clicking means something chanhes; create a new short url
    createShortUrl();
});
于 2013-01-07T11:20:46.053 に答える
0

入力の値（これらは文字列）を静的配列にプッシュしています。Firefoxやその他のブラウザで、この配列をDOMと並行して更新する理由はありません。

DOM要素自体を配列に格納し、それらから値を取得する場合、それは別の話になります。

于 2013-01-07T11:02:59.567 に答える