Связывание событий в jquery (двойное событие при клике ...)

Question

Я создаю налоговый калькулятор и у меня возникли проблемы с обязательными событиями. Есть пять полей:

1. Текстовое поле. Пользователь должен ввести свой город, а скрипт присваивает число текстовому значению. Например, вы вводите «Нью-Йорк», а когда вы нажимаете «Go!», Система назначает ему 0,1.
2. Slider. При перемещении ползунка номер в поле меняется.
3. Выберите поле с несколькими числовыми значениями.
4. и 5. Простые текстовые поля, в которых нужно набирать цифры

Все эти поля находятся в форме, называемой "taxcalculator". Когда вы отправляете его, запускается функция с именем "Calculatesum". Проблема заключается в том, что мне нужно использовать эту сумму для другого расчета с использованием плагина вычисления jquery и функции под названием «recalc». Итак, давайте предположим, что кто-то заполнил упомянутые поля, но хочет изменить некоторые цифры или текст в первом поле. Я хочу пересчитать другой расчет при каждом изменении. Мне удалось связать изменение окна выбора с помощью:

$("[id=select_box_1]").bind("change", recalc);

и изменение ползунка на аналогичный код.

Однако в двух случаях возникают проблемы с вызовом «recalc».

1: при запуске расчета нажатием кнопки «Вперед!» Кнопка, только одна функция срабатывает. Я хочу добиться, чтобы при нажатии кнопки «Перейти» обе функции сработали (рассчитать и пересчитать). Однако срабатывает только «Calculateum», и мне нужно использовать «MouseMove» или снова нажать на эту кнопку, чтобы использовать другую функцию.

2: Пользователь может изменить город, введенный в первом поле. В этом случае числовое значение изменяется, но числовое поле скрыто, и я не знаю, какое свойство использовать для запуска функции «recalc». Я думал, что «изменение» является логичным выбором, учитывая, что значение в поле изменяется, но оно не сработало.

Вот часть моего кода:

<form id="taxcalculator" style="height:150px;" action="#" onsubmit="calculatesum(); return false">

<input type="text" size="20" id="city" name="city" />

<div id="slider"></div>
</div>

<div id="income_1" style="width:300px; margin:0 0 15px 0;">
<select id="income_item_1" style="float:left; width:200px;">            
<option value="0" selected="selected">0</option>        
<option value="2.000">2.000</option>
<option value="4.000">4.000</option>
</select>
</div>

<input type="text" size="20" id="income2" name="income2" />
<input type="text" size="20" id="income3" name="income3" />

<input type="hidden" name="citytaxrate" id="citytaxrate">
<input type="submit" name="submit" value="Go!" id="go-calc" class="ui-button">
</div>
</form>

Расчет идет в следующем порядке:

1. Городу, который пользователь ввел в поле города, присваивается числовое значение, и это значение выводится в поле «citytaxrate»
2. Все значения (кроме «citytaxrate») суммируются с помощью функции «Calculatesum», которая запускается нажатием на «Go!» Кнопка
3. Общая сумма используется для функции "recalc", которая использует общую сумму, значение citytaxrate и два других значения, которые я вручную вставил в скрипт.

Основная проблема заключается в том, как заставить обе функции запускаться одним и тем же щелчком мыши. Даже в HTML я могу использовать

onsubmit="calculatesum(), recalc(); return false"

Тем не менее, первый щелчок (отправить) запускает только функцию «рассчитать сумму», а другой щелчок активирует функцию «пересчитать».

Answer 1

Что ж, если вы хотите связать два метода с одним и тем же событием, вы можете просто поместить их в один метод и вызвать его. Я никогда не связывал два метода с одним и тем же, поэтому не могу прокомментировать причину сбоя двойной привязки.

$("#select_box_1").change(theCommonMethod);

function theCommonMethod() {
   recalc();
   calculatesum();
}

Если вы разместите несколько примеров кода на jsfiddle.net, мы можем помочь вам и со второй проблемой.

РЕДАКТИРОВАТЬ

После вашего обновления я опубликовал основную скрипку с большинством событий, которые вы хотели связать. Посмотрите на это: http://jsfiddle.net/jomanlk/v5mRe/1/

Просто используйте селекторы jQuery, чтобы получить нужные значения, а затем выполните вычисления и обновите текстовое поле.

Answer 2

изменения получают только триггеры, когда вы меняете элемент управления (когда вы переключаетесь с одного текстового поля на другое текстовое поле). Он не срабатывает, если содержимое текстового поля изменяется.

Используйте функцию keyup или keydown в поле города, чтобы активировать функцию повторного вызова.