2009-02-23 5 views
5

私が遭遇してるのではjQueryを使ってその場でチェックボックス要素の作成 - 奇数IEの動作

var topics = ['All','Cat1','Cat2']; 
var topicContainer = $('ul#someElementId'); 

$.each(topics, function(iteration, item) 
{ 
    topicContainer.append(
     $(document.createElement("li")) 
     .append(
      $(document.createElement("input")).attr({ 
       id: 'topicFilter-' + item 
       ,name: item 
       ,value: item 
       ,type: 'checkbox' 
       ,checked:true 
      }) 
      .click(function(event) 
      { 
       var cbox = $(this)[0]; 
       alert(cbox.value); 
      }) 
     ) 
     .append(
      $(document.createElement('label')).attr({ 
       'for': 'topicFilter' + '-' + item 
      }) 
      .text(item) 
     ) 
    ) 
}); 

問題は2つですように私はjQueryを使ってその場でいくつかのチェックボックス要素を作成し、ノードにそれらを追加しています-fold(IEにのみあります)

  • チェックボックスはページに追加されますが、その値に「true」を指定すると、デフォルトのチェック状態はオフになります。 (値が「チェックされた」テストで差はない)
  • alert(cbox.value);が実行されると、毎回出力が「オン」になります。

私は、ここで重要な問題は、チェックボックスのデフォルトのチェック状態を設定し、デフォルトの「値」属性を設定するより良い方法が必要だと思います。しかし、私はまだ別の方法を見つけていません。

注:このコードはすべてFirefoxとChromeで正常に動作します。

これは、Internet Explorerを使用すると、DOMの一部ではない入力の確認値を変更できるように好きではないIE 7.0.5730.11でのjQuery 1.3.1テスト

答えて

14

です。アイテムが追加された後にチェックされた値を設定し、それが機能するかどうか確認してください。

+0

これは正しいです。ちょうどいくつかのテストでそれを確認しました。 –

+0

IEで何度もこの問題に遭遇しました。うれしいことが問題を解決しました。 –

+0

これは私の一日を作った、ありがとう –

2

私はあなたのコードの一部を再利用して、私は解像度が単に最初すなわちに属性宣言

type: 'checkbox', 

を移動することがわかった

Why does order of defining attributes for a dynamically created checkbox in jquery affect its value?

ごとに同様の問題があった:

$(document.createElement("input")).attr({ 
type: 'checkbox', 

この問題はすべて発生しました私のブラウザはIEの問題ではなく、むしろjqueryの「もの」だと思っています。私にとっては、値を設定する前(または前後)に追加すると問題はありませんでした。その違いは、入力のタイプを宣言した場所/時間にありました。

+0

+1良い、私は同じ問題を抱えていた – Bart

1

チェックされたチェックボックスの「checked」属性の状態はtrueではなく、「checked」という文字列の状態を持ちます。私は通常、jQueryを使ってDOMに要素を追加します。

var el = $('<input type="checkbox" id="topicFilter-' + '"' 
     + ' checked="checked" />'); 
$(topicContainer).append(el); 

とにかく、IMOはHTMLのように読みやすくなります。私はそれがIEで動作しない場合も、私は何年もこの方法をやってきた気になるでしょう。

関連する問題