2016-08-23 95 views
0
var myTimelineVis = { 
    loadData: function(visItems, visContainer, visOptions, visTimelines) { 
     $.getJSON('myURL/' + $(this).val(), function(data) { 
      visItems.clear(); 
      $.each(data, function(i, imp_sched_events) { 
       $.each(imp_sched_events.items.timeline_dataset, function(i, item) { 
        visItems.add(item); 
        if ($(visContainer).is(':empty')) { 
         visTimeline = new vis.Timeline(visContainer, visItems, visOptions); 
        } else { 
         visItems.update(item); 
        } 
        visTimeline.fit(); 
        $('.vis-item-content').foundation(); 
       }); 
      }); 
     }); 
    }, 
    setData: function(selectClass) { 
     var visItems = new vis.DataSet(), 
      visContainer = document.getElementById('visualization'), 
      visOptions = {}, 
      visTimeline = ''; 
     $(selectClass).on('change', function(visItems, visContainer, visOptions, visTimelines) { 
      this.loadData(visItems, visContainer, visOptions, visTimelines); 
     }); 
    } 
} 

$(document).ready(function() { 
     myTimelineVis.setData('select.implementation_schedule'); 
}); 

我试图在页面加载时创建vis时间轴,然后在选择更改(我有两个选择)时将数据加载到它上面。在页面加载时,我可以在Chrome控制台中看到更改事件绑定到两个选择,但实际选择更改没有任何反应,甚至没有发生错误。它只是表现为他们不存在。jQuery .on更改事件绑定但未触发

这是一个范围问题?

+1

那么他们存在,当你绑定事件? 'console.log($(selectClass).length)' – epascarello

+1

注意,只有一个参数(Event对象)被传递给事件处理函数'.on('change',function(visItems,visContainer,visOptions, visTimelines){...}''''''''''''''''''''''''''''''''''''''''''检查[on](http://api.jquery.com/on/)查看,如何传递参数 – Teemu

+0

您是否正在尝试$(selectClass).change();' – Shanimal

回答

1

对于jQuery,侦听器不会被添加到Ajax调用中,而是添加到$(document).ready()中。它的工作方式与香草JavaScript不同。

如果select是动态更改的,则需要使用以下语法和硬编码选择器。选择器可以像“#myForm select”一样宽泛。没有必要使用变量。

$(document).on('change', '.selectClass', function(visItems, visContainer, visOptions,  visTimelines) { 
      this.loadData(visItems, visContainer, visOptions, visTimelines); 
     }); 
}); 
+0

我最终重构了代码,但是这个答案使我走上了正确的轨道,谢谢! – tomster2300

+0

不客气! – user1861582