选择On Change无法正常工作

我有一个select选项，可以调用需要在更改时触发的函数。 但现在它是在页面加载和更改时触发的。 见下文：

$(function () { $('select[id^="iZondagbegin_"]').on('change', uren("Zondag")); $('select[id^="iZondageinde_"]').on('change', uren("Zondag")); $('select[id^="iMaandagBegin_"]').on('change', uren("Maandag")); $('select[id^="iMaandageinde_"]').on('change', uren("Maandag")); $('select[id^="iDinsdagbegin_"]').on('change', uren("Dinsdag")); $('select[id^="iDinsdageinde_"]').on('change', uren("Dinsdag")); $('select[id^="iWoensdagbegin_"]').on('change', uren("Woensdag")); $('select[id^="iWoensdageinde_"]').on('change', uren("Woensdag")); $('select[id^="iDonderdagbegin_"]').on('change', uren("Donderdag")); $('select[id^="iDonderdageinde_"]').on('change', uren("Donderdag")); $('select[id^="iVrijdagbegin_"]').on('change', uren("Vrijdag")); $('select[id^="iVrijdageinde_"]').on('change', uren("Vrijdag")); $('select[id^="iZaterdagbegin_"]').on('change', uren("Zaterdag")); $('select[id^="iZaterdageinde_"]').on('change', uren("Zaterdag")); function uren(dag) { var vandaag = datumvandaag(); var pauze = ($('[title="Pauze"]').val()); var error; $('input[id^="i' + dag + '_"]').val(""); //get values var tijdStart = ($('select[id^="i' + dag + 'begin_"]').val()); var uurStartControle = +($('select[id^="i' + dag + 'begin_"]').val()); tijdStart += ":" + ($('select[id^="i' + dag + 'begin_"]').filter("[id$='_$DateTimeFieldDateMinutes']").val()); var minutenStartControle = +($('select[id^="i' + dag +'begin_"]').filter("[id$='_$DateTimeFieldDateMinutes']").val()); //var datezondagstart = new Date(vandaag + tijdstart + ":00"); var tijdStop = ($('select[id^="i' + dag + 'einde_"]').val()); var uurStopControle = +($('select[id^="i' + dag + 'einde_"]').val()); tijdStop += ":" + ($('select[id^="i' + dag + 'einde_"]').filter("[id$='_$DateTimeFieldDateMinutes']").val()); var minutenStopControle = +($('select[id^="i' + dag + 'einde_"]').filter("[id$='_$DateTimeFieldDateMinutes']").val()); if (uurStartControle >= uurStopControle && minutenStartControle >= minutenStopControle || uurStopControle <= uurStartControle) { alert("Tijd is ongeldig!"); error = 1; } if (error != 1) { var totaleTijd = tijdsverschil(tijdStart, tijdStop, pauze); if (totaleTijd != '00:00') { $('input[id^="i' + dag + 'uren_"]').val(totaleTijd); } else{ alert("Tijd is ongeldig!"); } } } }); 

任何人都知道我做错了什么？ 我是以错误的方式称呼它？

Answer 1

目前，当你使用uren("Zondag")时，你正在调用uren函数。 您应该使用匿名函数作为事件处理程序并调用uren函数。

用它就好

 $('select[id^="iZondagbegin_"]').on('change', uren("Zondag")); 

至：

 $('select[id^="iZondagbegin_"]').on('change', function () { uren("Zondag"); }); 

我建议您使用data-*属性来存储需要传递给更改事件处理程序的内容。

例：

HTML，这里添加了一个cooom类mySelect

  ....   ....  

脚本

 $('.mySelect').on('change', function () { uren($(this).data('value')); }); 

Answer 2

已经有两个答案指出了你的问题; 另一种解决方案是让jQuery使用$.proxy处理上下文：

 $('select[id^="iZondagbegin_"]').on('change', $.proxy(uren, null, "Zondag"); 

更多信息在这里

Answer 3

请更改所有行：

 $('select[id^="iZondagbegin_"]').on('change', uren("Zondag")); 

至：

 $('select[id^="iZondagbegin_"]').on('change', uren); 

和：

 ..... 

和：

 function uren() { var value = $(this).data('value'); //..... } 

或者更好的是，在所有select元素上使用一个公共类， .myclass ，并使用一个语句进行绑定。

 $('select.myclass').on('change', uren); ..... ..... ..... function uren() { var value = $(this).data('value'); //..... } 

当您传递这样的参数或者您提供() ，将立即调用该函数。 你不希望这样。