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()'s 委托语法。改变：

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

至：

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

从文档：

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

理想情况下，您希望使用更接近目标元素的元素，document而不是最坏的情况。

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

于 2013-06-17T19:54:43.787 回答