是否可以在他们提供的 amcharts 多数据集图表的选择元素上触发“更改”?
$(".amChartsDataSetSelector").find("select").val("2").trigger("change");
这是我尝试过的代码,它的作用基本上是将选择选项更改为我选择的选项,但它不会相应地改变图表.
有没有其他替代方案到这个方法?
这是我的fiddle http://jsfiddle.net/p9vpxzbq/1/:
这是原始链接 http://www.amcharts.com/demos/multiple-data-sets/#到 amcharts 上的图表。
jQuery.trigger(仅当使用 jQuery 绑定事件时才有效.on函数(或任何事件绑定函数)。 http://learn.jquery.com/events/triggering-event-handlers/#how-can-i-mimic-a-native-browser-event-if-not-trigger下面是一个简单的示例,向您展示发生了什么。
跳转到下面的#Solution 以跳过此演示。
$(function() {
var el = document.getElementById('checkEvent');
if (el.addEventListener) {
el.addEventListener("change", checkEvent, false);
} else {
el.attachEvent('change', checkEvent);
}
function checkEvent() {
alert('Event Check');
}
$('#changeDDValue').click(function() {
$('#checkEvent').val("2").change();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="checkEvent" style="width: 180px;">
<option value="0">first data set</option>
<option value="1">second data set</option>
<option value="2">third data set</option>
<option value="3">fourth data set</option>
</select>
<button id="changeDDValue">Change DataSet</button>
解决方案:
添加了一个按钮#change
设置不同的数据集,如下所示,
$('#change').click(function () {
var selectEl = $(".amChartsDataSetSelector").find("select").val("2").get(0);
fireEvent.call(selectEl, 'change');
});
然后使用下面的 fireEvent 函数来触发更改事件而不是trigger('change')
,
//http://stackoverflow.com/a/2490876/297641
function fireEvent(eventName) {
var event; // The custom event that will be created
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(eventName, true, true);
} else {
event = document.createEventObject();
event.eventType = eventName;
}
event.eventName = eventName;
if (document.createEvent) {
this.dispatchEvent(event);
} else {
this.fireEvent("on" + event.eventType, event);
}
}
修复了 jsFiddle http://jsfiddle.net/3dejfjxc/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)