Question

我正在动态地在每个图表中生成一个按钮。就像这样：

"<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);
    }
}

);

Answer 1

由于您正在处理动态生成的元素，因此需要使用.on()的委托语法。变化：

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

为：

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

来自文档：

事件处理程序仅绑定到当前选定的元素;他们在您的代码调用.on（）时页面上必须存在。要确保元素存在且可以选择，请执行事件绑定在文档就绪处理程序中的元素页面上的HTML标记。如果将新HTML注入页面，选择元素并在新HTML之后附加事件处理程序放入页面。

理想情况下，您希望使用比document更接近目标元素的元素，这是最糟糕的情况。

在文档顶部附近附加许多委托事件处理程序树会降低性能。每次事件发生时，jQuery都必须比较该类型的所有附加事件的所有选择器从事件目标到最高层的路径中的元素文献。为获得最佳性能，请在文档中附加委派事件位置尽可能接近目标元素。避免过量使用document或document.body来处理大型的委托事件文档。

在动态生成的下拉列表中，当我选择一个选项时，不会调用相应的功能

1 个答案: