3

内容（OPTION要素）がAJAXを介してロードされ、準備完了時に挿入され、別のSELECTが変更されたときにSELECT要素があります。両方のSELECTには、AJAXを介してロードされたもののリストに追加された2つのOPTION要素があります。

<option disabled="disabled"></option>
<option value="edit">Edit&hellip;</option>

次のjQueryイベントバインディングがonreadyにあります。

$('#theSelect').bind('change click', handleSelection);

次に、このhandleSelection()メソッドは、選択されている「編集...」オプションをインターセプトし、選択を以前に選択されたオプションに戻し、ユーザーがメニューのオプションを編集できるダイアログを表示する他の関数を起動します。これはSafariとChromeでうまく機能しますが、Chromeで機能しないケースが1つあります。AJAXを介して読み込むオプションがないため、無効になっているオプションと[編集...]オプションのみが表示されている場合、選択されている「編集...」オプションのイベント。これは、Chromeでは「編集...」オプションがデフォルトで選択されており（これは最初の有効なオプションであるためです。一方、Safariは最初のオプションであるため無効なオプションを選択するため）、起動するだけであるためと思われます。クリックではなく、SELECT要素のイベントを変更する（クリックと変更の両方を聞く理由）が、「編集...」がすでに選択されている場合、実際には変更されないため、イベントは発生しません。

では、どうすればこれを回避できますか？すべてのフォーカスイベントをインターセプトし、何が起こっているのかを解釈するために汚い作業を行う必要がありますか？Chromeに「編集...」の代わりに無効なオプションを選択させる方法はありますか？

4

1 に答える 1

1

コメントでのSlavoの提案で、私はすべてのブラウザにAJAXインジェクション時に最初のオプションを選択させるように強制しました。

// force select the first option (fixes a Chrome issue)
$('#theSelect option:selected').removeAttr('selected')
$('#theSelect option:first-child').attr('selected', 'selected');

これにより、ブラウザの動作が標準化され、Chromeはデフォルトで有効な[編集...]オプションではなく、無効なオプションを選択します。

于 2012-06-06T18:41:49.210 に答える