Создание кнопок для текстового поля и назначение функций нажатия на лету в JQuery

Question

У меня есть следующий код для создания двух кнопок (одна слева и справа) для каждого текстового поля на странице. Идея состоит в том, чтобы сделать текстовое поле увеличения / уменьшения. Код прекрасно работает с одним текстовым полем, но с 2 или более кнопками каждый увеличивает / уменьшает все текстовые поля.

Есть идеи, как создать кнопки на лету и прикрепить их к текстовому полю для увеличения / уменьшения?

jQuery.fn.incrementer =  function() {
    this.val(0);
    this.before("<input class='incrementer_minus' type='button' value=' - '/>");        
    var myobj = this;
    $(".incrementer_minus").live('click', function(){
        $(myobj).val(parseInt(JQ(myobj).val()) - 1);
    });
    this.after("<input class='incrementer_plus' type='button' value=' + '/>");
    $(".incrementer_plus").live('click', function(){
        $(myobj).val(parseInt(JQ(myobj).val()) + 1);
    });
}

JQ("#increment").incrementer();
JQ("#increment2").incrementer();

Answer 1

Вы связываете событие щелчка с каждым экземпляром incrementer_minus и incrementer_plus, когда вы делаете:

$(".incrementer_plus").live('click'...

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

Я изменил ваш код, чтобы сделать это, и я также использовал bind вместо live, так как вам просто не нужно live.

Я также изменил JQ на jQuery для моего удобства.Вы можете изменить его обратно.

Проверьте это: http://jsfiddle.net/mAsr9/

jQuery.fn.incrementer =  function() {
    var myobj = this;
    this.val(0);

      // Create new element, and insert before 'this'
    jQuery("<input class='incrementer_minus' type='button' value=' - '/>").insertBefore(this)

           // Then bind the click event to that new element
        .bind('click', function(){
            $(myobj).val(parseInt(jQuery(myobj).val()) - 1);
        });

      // Create new element, and insert after 'this'
    jQuery("<input class='incrementer_plus' type='button' value=' + '/>").insertAfter(this)

          // Then bind the click event to that new element
        .bind('click', function(){
            $(myobj).val(parseInt(jQuery(myobj).val()) + 1);
        });
}

$(function() {
    jQuery("#increment").incrementer();
    jQuery("#increment2").incrementer();
});

Answer 2

Взгляните на плагин jQuery Increment: http://sean -o.com / increment

Я создал его только для такого использования, надеюсь, он может (все еще?) Бытьвам в помощь.

Answer 3

Вы после спиннеров ..
Вот некоторые плагины ..
http://plugins.jquery.com/project/spinbox
http://docs.jquery.com/UI/Spinner
http://www.command -tab.com / 2007/05/07 / JQuery-кок-плагин /