Пользовательская функция jQuery с date.js

Я пытаюсь создать пользовательскую функцию date.js, которая (в сочетании с начальной загрузкой) будет реагировать на каждый ввод...

Моя функция работает для ПЕРВОГО элемента в серии полей, если я говорю $(".date-js").changeIt();, но только для первого.

$.fn.changeIt = function() {
    var input = "input#" + $(this).attr('id');
    input = $(input).data('val', $(input).val()); // save value
    $(input).change(function() { // works when input will be blured and the value was changed
        date = Date.parse(input.val());

        if (date !== null) {
            input.removeClass();
            input.parent().removeClass("error success");
            input.parent().addClass("success");
            input.addClass("success");
        } else {
            input.removeClass();
            input.parent().removeClass("error success");
            input.addClass("field_with_errors");
            input.parent().addClass("error");
        }
    });

    $(input).keyup(function() { // works immediately when user press button inside of the input
        if ($(input).val() != $(input).data('val')) { // check if value changed
            $(input).data('val', $(input).val()); // save new value
            $(this).change(); // simulate "change" event
        }
    });
}

= form_for [@tool, @calibration] do |f|
  #errors
  .form-container
    -if @tool.status == "In"
      %p Enter time taken for calibration
      .field.control-group
        = f.label :ats_in
        = f.text_field :ats_in, :class => "date-js"
    -if @tool.status == "Out"
      %p Enter time returned
      .field.control-group
        = f.label :cal_date
        = f.text_field :cal_date, :class => "date-js"
      .field.control-group
        = f.label :cal_date_due
        = f.text_field :cal_date_due, :class => "date-js"
      .field.control-group
        = f.label :ats_out
        = f.text_field :ats_out, :class => "date-js"
  .clear
  = f.submit 'Save', :disable_with => "Saving..."

ruby-on-rails jquery twitter-bootstrap datejs
person Kevin Brown    schedule 09.07.2013    source источник
comment
Пожалуйста, добавьте разметку HTML для ввода   -  person Manoj Yadav    schedule 09.07.2013

Ответы (1)


arrow_upward
0
arrow_downward

Оберните код вашего плагина в return this.each(function () { });, тогда он будет применяться ко всем соответствующим элементам. Обновленный код:

$.fn.changeIt = function() {
    return this.each(function() {
        var input = "input#" + $(this).attr('id');
        input = $(input).data('val', $(input).val()); // save value
        $(input).change(function() { // works when input will be blured and the value was changed
            date = Date.parse(input.val());
            if (date !== null) {
                input.removeClass();
                input.parent().removeClass("error success");
                input.parent().addClass("success");
                input.addClass("success");
            } else {
                input.removeClass();
                input.parent().removeClass("error success");
                input.addClass("field_with_errors");
                input.parent().addClass("error");
            }
        });

        $(input).keyup(function() { // works immediately when user press button inside of the input
            if ($(input).val() != $(input).data('val')) { // check if value changed
                $(input).data('val', $(input).val()); // save new value
                $(this).change(); // simulate "change" event
            }
        });
    });
}
person Manoj Yadav    schedule 09.07.2013
comment
Поскольку $(".date-js") вернет массив элементов, и вам нужно повторить его с помощью each, для получения дополнительной информации посетите stackoverflow.com/questions/2678185/ - person Manoj Yadav; 09.07.2013