2012-05-22 7 views
5

私は、ページからHTMLを取得してメインWebページに挿入する必要があるプロジェクトに取り組んでいます。それはChromeとFirefoxではまったく動作しますが、IE 9では失敗します。ここでは、私が使用するコードを省略しています。IE9問題:動的に作成された(innerHTMLを介して)オプションボタンとチェックボックスが機能しない

if (!element.data('cache')) { 

     $('#contentHolder').html('<img src="ajax_preloader.gif" width="64" height="64" class="preloader" />'); 

     $.get(element.data('page'), function (msg) { 
     $('#contentHolder').html(msg); 

     /* After page was received, add it to the cache for the current hyperlink: */ 
      element.data('cache', msg); 
      setTimeout("checkonbox()", 100); 
     }); 
    } 
    else { 
     $('#contentHolder').html(element.data('cache')); 
     setTimeout("checkonbox()", 100); 
    } 

注入されるHTMLは

<table style="width:400px; height: 388px; text-align: left;" align="left"> 
<tr> 
<td><input id="Checkbox0" type="checkbox" onclick="changebuttons();" checked="true"> 
Exclusive.</input></td> 
</tr> 
</table> 

プラスいくつかのより多くのオプションボタンです。

すべてが完全に表示されますが、チェックボックスやオプションボタンをクリックすることはできません。

+0

changebuttons()関数は何をしますか?これは問題の原因として考えられます。もう一つ確認すべきことはjqueryのバージョンです - IE9や古いバージョンのjqueryにはいくつかのバグがあります。 – FluffyKitten

+0

サイドノート - 'changebuttons() 'を'; 'で終了する必要はありません。これは、コード後に何もしないからです。ちょうどヒント、深刻な何も。 – Ohgodwhy

+0

jquery 1.7.2を使用しています。私はまた、onclickイベントが動作していることを発見しました。チェックボックスは変更されません。私は私のchangebuttons関数のトップに以下を含めました。if(navigator.appName == 'Microsoft Internet Explorer'){ document.getElementById( 'Checkbox0')。checked = 1 - document.getElementById( 'Checkbox0')。チェック。 } 'それは完全に動作します。 – Urza

答えて

0

質問に完全なコードが表示されません。しかし、私は、あなたが初期化子内のコードを入れていないと仮定しています:

$(function() { 
     // your jQuery code here. 
    }); 

これは、その要素に関連するイベントを初期化するために、ブラウザに役立ちます。これを試して、変更があるかどうか確認してください。

また、javascriptにエラーがある場合は削除してください。利用可能なブラウザでデバッグを試みてください。私が遭遇した最高のjavascriptデバッガは、FireBugです。これはFirefoxのアドオンです。

0

このような入力タグは見たことがありません。私はまだ朝のコーヒーを持っていないが、私はそれが自己閉鎖すべきであることをかなり確信している。その場合、あなたがそこにいることについてIE barfingを見るのは驚くことではない。

「排他的」にすることが考えられました。ラベルのクリック可能な場合は、次のようなラベルタグを入力する必要があります。

<label for="Checkbox0"><input id="Checkbox0" type="checkbox" onclick="changebuttons();" checked="true" />Exclusive.</label> 

+0

代わりにラベルタグに 'for'属性を指定することができますので、ラベルに入力を囲む必要はありません – vittore

+0

もちろんです!そのコードのforは重複しています。失敗...私はそのカフェインを持っていたはずだったことは分かっていた。 –

0

domに動的に追加されたものはすべて、ページにロードされた後でアクションにバインドする必要があります。 AJAX経由でコードをドロップするだけでは、実行されません。

はあなたの関数でこれをやってみてください:

$.get(element.data('page'), function (msg) { 
     $('#contentHolder').html(msg); 

     //this will bind your input field via javascript 
     $('input#Checkbox0').click(changebuttons); 

     /* After page was received, add it to the cache for the current hyperlink: */ 
      element.data('cache', msg); 
      setTimeout("checkonbox()", 100); 
}); 
0

は、それが動作します

$(element) 

element 

を交換してください。