0

すべてのチャートでボタンを動的に生成しています。このような ：

"<a id='gridBtn_"+i+"' href='javascript:;'  class='icon-table'  onclick='showGridIcons(this)'></a>"

任意のチャートでそのボタンをクリックすると、ドロップダウンが動的に生成されます

このような ：

"<div id='grid-icons_"+i+"' style='position:absolute;z-index:1;display:none;' >"+
    "<select  id='gridType' onchange='javascript:alert('hello');'>"+
     "<option  value='Grid_"+i+"'>Grid</option>"+
    "<option   value='Pivot_"+i+"'>Pivot</option>"+
    "</select></div>"

function  showGridIcons(gridBtn) {
    var btnId = gridBtn.id;
    i = parseInt(btnId.split("_")[1]);

    $('#grid-icons_'+i).slideToggle(1000);
}

今私の質問は、そのドロップダウンからオプションを選択すると、それぞれの関数が呼び出されないときです

このような：

$('#gridType').on('change', function(){

    try{
        if(type==='Grid'){
            alert("GRID"):
        }
        else{
        alert("PIVOT"):
}

    }
    catch(err){
        alert(err);
    }
}

);
4

1 に答える 1

2

動的に生成された要素を扱っているため、.on()の委譲構文を使用する必要があります。変化する：

$('#gridType').on('change', function(){

に：

$(document).on('change', '#gridType' ,function(){

ドキュメントから：

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。

document理想的には、最悪のシナリオよりもターゲット要素に近い要素を使用する必要があります。

ドキュメント ツリーの最上部近くに委任されたイベント ハンドラを多数アタッチすると、パフォーマンスが低下する可能性があります。イベントが発生するたびに、jQuery は、そのタイプのすべての添付イベントのすべてのセレクターを、イベント ターゲットからドキュメントの先頭までのパス内のすべての要素と比較する必要があります。最高のパフォーマンスを得るには、委任されたイベントをターゲット要素にできるだけ近いドキュメントの場所に添付します。大きなドキュメントの委任イベントに document または document.body を過度に使用しないでください。

于 2013-06-17T19:54:43.787 に答える