Функция JQuery, упаковка и живое связывание - PullRequest
Новая
       28

Функция JQuery, упаковка и живое связывание

2 голосов
/ 03 октября 2011

Я написал замечательную функцию для обертывания ввода кнопками увеличения / уменьшения: 

$.fn.qDecInc = function(){
return this.wrap('<span id="qButtons" />').after($('<span/>', { class: 'qIncButton' }).bind('click', function() {
    var ov = 0;
    if (isNaN($(this).val())){
        ov = 0;
    } else {
        ov = $(this).val();
    }
    if (ov < 99){
        var nv = parseFloat(ov) + 1;
        $(this).val(nv);
        $(this).keyup();
        $(this).change();
    }
}), $('<span/>', { class: 'qDecButton', style: 'top: 11px;' }).bind('click', function() {
    var ov = 0;
    if (isNaN($(this).val())){
        ov = 0;
    } else {
        ov = $(this).val();
    }
    if (ov > 0){
        var nv = parseFloat(ov) - 1;
        $(this).val(nv);
        $(this).keyup();
        $(this).change();
    }
}));
}

Значения обновляются, а входы - нет.Я пытался 

$(this).live("change");

и даже 

$("body").delegate($(this), "change");

безрезультатно.Что я пропустил?

http://jsfiddle.net/MVxsA/1/ - вот вам jsfiddle для вашего удобства.

1 Ответ

3 голосов
/ 03 октября 2011

Два вопроса

  1. в этом контексте вам следует использовать .bind('click', function() {...}) вместо live().Или вы можете использовать удобный способ ярлыка .click(function() {...}).Функция live() используется, когда элементы будут добавлены в dom позже, и вы хотите, чтобы jQuery автоматически прикреплял слушателей к новым элементам в это время.По этой причине live() также требуется селектор (который в вашем примере опущен).

  2. Внутри обработчика событий this относится к элементу, для которого был запущен слушатель.Так что в этом случае this - это qIncButton или qDecButton, , а не - элемент, к которому применяется плагин.

Вот как эти проблемы можно исправить: 

$.fn.qDecInc = function(){
    var self = this;
    return self.wrap('<span id="qButtons" />').after($('<span/>', { class: 'qIncButton' }).click(function() {
        console.log("up");
        var ov = 0;
        if (isNaN($(self).val())){
            ov = 0;
        } else {
            ov = $(self).val();
        }
        if (ov < 99){
            var nv = parseFloat(ov) + 1;
            $(self).val(nv);
            $(self).keyup();
            $('body').change();
        }
    }), $('<span/>', { class: 'qDecButton', style: 'top: 11px;' }).click(function() {
        console.log("down");
        var ov = 0;
        if (isNaN($(self).val())){
            ov = 0;
        } else {
            ov = $(self).val();
        }
        if (ov > 0){
            var nv = parseFloat(ov) - 1;
            $(self).val(nv);
            $(self).keyup();
            $(self).change();
        }
    }));
}

Ваш обновленный jsFiddle находится здесь

...