Блог

У меня есть опция выбора, которая вызывает функцию, которая должна запускаться при изменении. Но теперь он срабатывает при загрузке страницы и при изменении. Смотрите ниже:

 $(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 amp;amp; 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!");
        }
    }
}

});
  

У кого-нибудь есть идея, что я делаю неправильно? Я, я называю это неправильно?

В данный момент вы вызываете 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'));
});
  

Уже есть два ответа, которые указывают на вашу проблему; альтернативное решение — позволить jQuery обрабатывать контексты с $.proxy :

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

Дополнительная информация здесь

Пожалуйста, измените все строки, подобные:

 $('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');
     //.....
}
  

Или, что еще лучше, используйте общий класс, .myclass скажем, для всех элементов select и выполните привязку с помощью одного оператора.

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

Когда вы передаете подобные аргументы или когда вы предоставляете () , функция будет вызвана немедленно. Вы этого не хотите.