Question

我有一个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时，您正在调用uren("Zondag")功能。您应该使用匿名函数作为事件处理程序并调用uren函数。

像

一样使用它

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

要：

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

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

实施例

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

<select class="mySelect" id="iZondagbegin_1" data-value="Zondag"> .... </select>
<select class="mySelect" id="iMaandagBegin_" data-value="Maandag"> .... </select>

脚本

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

Answer 2

请更改所有行：

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

要：

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

和

<select id="iZondagbegin_...." data-value="Zondag">.....</select>

和

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

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

$('select.myclass').on('change', uren);
.....
<select id="iZondagbegin_...." data-value="Zondag" class="myclass">.....</select>
.....
function uren() {
     var value = $(this).data('value');
     //.....
}

当您传递类似的参数或提供()时，将立即调用该函数。你不想要那个。

Answer 3

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

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

More info here

选择On Change无法正常工作

3 个答案:

实施例