IEの奇妙なjQueryの動作

Question

私はそれをスタイルすることができるようにチェックボックスを置き換えるスパン要素を持っています。私もラベルタグを持っています。クリックすると、ユーザーがspan要素をクリックしたように、スパンのクリックイベントが発生します。言い換えれば、私はlabel/spanとlabel/checkboxの関係を模倣しています。

この機能は、FirefoxとChromeでは意図的に動作しますが、IEでは動作しません。 IE 7と8では、ラベルをクリックすると、何もしませんし、ソース内のいくつかの奇妙な属性を生成するようだ：

<span class="checkbox" id="Vechicle-1" jQuery15105041923284548672="2"/> 
<label class="large text-left" for="Vechicle-1" jQuery15105041923284548672="24"> 

IE 9では、私はjQueryの文字列が追加表示されていないと、2倍のクリックをスパンのをオフに解雇されるラベルクリックイベント。

$('.checkbox').click(function() { 
    $(this).toggleClass('checked'); 

    if ($(this).hasClass('checked')) { 
     $('#checkbox-' + $(this).attr('id')).attr('checked', 'checked'); 
    } else { 
     $('#checkbox-' + $(this).attr('id')).removeAttr('checked'); 
    } 
}); 

$('label').click(function() { 
    $('#' + $(this).attr('for')).click(); 
}); 

この現象の原因は何ですか？

Answer 1

たぶん、クリックイベントが上向きにバブリングされ、他のコードをトリガーし、コードを変更してコードを防止してください。

$('.checkbox').click(function (event) { 
    event.preventDefault(); 
    $(this).toggleClass('checked'); 
    //...... 

他のクリックハンドラーでも同じです。

編集：この動作の根本を見つけました。明らかになったように、IEブラウザの "let"ラベルは非フォーム要素にも影響します。をクリックすると、要素の種類に関係なく、ラベルforのIDとして定義されたIDの要素のclickイベントがトリガーされます。

Chrome（おそらくFirefox）は、チェックボックスのようなフォーム要素だけをトリガーできるようにします。

here jQueryの行がコメントされているにも関わらず、ラベルをクリックしたときにスパンがクリックされていることがわかります。
（フィドル内のコードは、元の質問と同じです）

すべてこれは興味深い結論に沸く：ラベルをクリックすると、スパンが二回クリックされる原因となった - 1ブラウザで、時間とjQueryコードによって別のものを、その状態を2回トグルさせます。

Answer 2

代替オプションは、チェックボックスまたはラベルのいずれかをユーザーがクリックするときに呼び出すことができる外部関数内でご$('.checkbox').clickコードを配置することです：

function checkboxClick(checkboxElement){ 
    checkboxElement.toggleClass('checked'); 

    if (checkboxElement.hasClass('checked')) { 
     $('#checkbox-' + checkboxElement.attr('id')).attr('checked', 'checked'); 
    } else { 
     $('#checkbox-' + checkboxElement.attr('id')).removeAttr('checked'); 
    } 

} 

$('.checkbox').click(function() { 
    checkboxClick($(this));    
}); 

$('label').click(function() { 
    checkboxClick($('#' + $(this).attr('for'))); 
}); 

Answer 3

forを取得して要素を見つける代わりに、 prevメソッドを使用して、span要素を返し、clickメソッドを呼び出すことができます。あなたが属性を設定しようとすると、IEがうまく振る舞うdoesntの

$('label').click(function() { 
    $(this).prev().click(); 
}); 

Answer 4

には、JavaScriptで確認し、このバグは、常に私のお尻で私をかましています。私はこの問題を解決することができた簡単な方法は、完全にinoutの要素を削除し、= checked属性を持つ新しい入力要素と交換することでしたし、「確認」、それは...このことができます

var $checkedItem= $(selectorForCheckedBox) 


$checkedItem.clone().addAttr("checked","checked").insertAfter('span.checkbox'); 
$checkedItem.detach(); //$checkedItem.remove() use it appropriately. 

希望に動作します。あなたがより簡単な修正を見つけるならばコメントは役に立ちます//