在我的网站中,我首先调用一个javascript函数,使用户可以更改我网站上特定元素的布局。然后,当用户更改下拉列表的值时,将调用相同的javascript函数,但用户应更改他选择的新元素的布局。
问题是第一个函数保持活动状态,因此它们都会继续执行。这意味着用户然后更改第一个元素和第二个元素的布局(仅当第二个元素应该更改时)
代码提取:
//Called function in page load
general_layout_changes(chart_variables);
//Called function when dropbox value changes
$(document).on('change', '.report_item_choosen', function(){
general_layout_changes(chart_variables);
});
//Part of the function
function general_layout_changes(chart_variables){
$(document).on('keyup', '.change-text-x-label', function() {
var changeText = $( this ).val();
var svg = d3.select("#" + chart_variables.chart_id_name + "_content").transition();
svg.select("text.x-label")
.text(changeText);
});
}
答案 0 :(得分:1)
您在general_layout_changes
函数的每次调用中,同一元素上的多次 相同的事件监听器:绑定另一个事件监听器。
您可以替换此处提供的整个代码:
$(document).on('keyup', '.change-text-x-label', function() {
var changeText = $( this ).val();
var svg = d3.select("#" + chart_variables.chart_id_name + "_content").transition();
svg.select("text.x-label").text(changeText);
});
这样做会更好,但更好,因为它只会绑定事件一次。