функция вызывается несколько раз в JQuery плагин

Извините название, не знаю, как описать это на самом деле, так как я не уверен, что происходит:функция вызывается несколько раз в JQuery плагин

http://jsfiddle.net/KpmyR/7/

Если вы посмотрите на это JS скрипка, я пытаюсь создать свой собственный контроль подталкивания, чтобы понять, как работают плагины. Мой плагин вызывается $("#textbox1").DTJS()

С одним элементом на странице мой плагин, похоже, работает нормально, когда я добавляю несколько экземпляров его на страницу, код, кажется, стреляет экспоненциально. (Я в основном жду события onClick в своем плагине).

Как это на данный момент, я назвал мои $("#textbox1").DTJS() три раза, как показано ниже:

$(document).ready(function() { 
$("#textbox1").DTJS({ 
    'width': '75px', 
    'max': '15', 
    'min': '5' 
}); 

$("#textbox2").DTJS({ 
    'width': '75px', 
    'max': '15', 
    'min': '5' 
}); 


$("#textbox3").DTJS({ 
    'width': '75px', 
    'max': '15', 
    'min': '5' 
}); 
});

Если я нажимаю на нижней одной стороны, это увеличивает/deincremements на 1, если я нажму на середину он делает это на 2, и если я нажму верхнюю, то сделаю это на 3.

Не могли бы кто-нибудь объяснить, почему это происходит?

источник

2013-04-16 JustAnotherDeveloper

проверить эту скрипку работает скрипку http://jsfiddle.net/KpmyR/8/ – gaurav

Это действительно никакого способа, чтобы написать правильный плагин, вы должны делать что-то намного больше нравится [** Fiddle **] (http://jsfiddle.net/KpmyR/10/) !! – adeneo

@adeneo Это выглядит так, как я должен признать. Плюс я предполагаю, что выполнение возврата по строке 18 для цепочки? Итак, все, что я хотел, чтобы каждый отдельный экземпляр делал, был здесь? – JustAnotherDeveloper

просто изменить:

$('.valueUp').click(...);

к этому:

$(this).siblings('.valueUp').click(...);

То же самое верно и для .valueDown.

Связывая событие только с .valueUp, вы привязываете его к любому .valueUp на странице, что объясняет, почему событие связано 3 раза в первом и 2 раза на втором.

Несколько других советов:

this уже объект JQuery

Как Snuffleupagus отметил, this уже объект JQuery, так что вам не нужно для звонка $(this). Это верно для любой функции, которую вы добавляете к $.fn.
возвращение this

Возвращая this в конце плагина, вы поддерживаете chainability. Например, если вы добавите return this в конец своего плагина, вы можете сделать что-то вроде этого:

$ ("# textbox1"). DTJS ({'width': '75px', 'max': '15 ',' min ':' 5 '}). fadeIn();

источник

2013-04-16 15:40:38 lbstr

Это работает красиво. Не могли бы вы объяснить, почему это так? Я делаю это для учебных целей, а не для производства. Я, очевидно, предположил, что он действительно сделает это: «click -> этот экземпляр, который был нажат« ', а не« click », действует так, как если бы все были нажаты« – JustAnotherDeveloper

, когда вы говорите «$ ('. ValueUp»). Click (. ..) ', вы привязываете событие click ко всем элементам с классом' valueUp' на странице. В первый раз, когда вы вызываете свой плагин, на странице есть только один. Во второй раз есть два и первый получает событие дважды. В третий раз три, поэтому первое из них теперь имеет 3 раза. Этот обработчик будет вызываться один раз для каждого связанного момента. – lbstr

, говоря «$ (это) .siblings ('. valueUp'). click (...) ', вы делаете его относительно элемента, который вы назвали плагином. Другими словами, вы привязываете событие click к' .valueUp', что брата из текущего текстового поля.Таким образом, событие только получает привязку один раз и, следовательно, только один раз срабатывает. – lbstr

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

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

например,

var up = $('<button class="valueUp valueHoldDown btn-mini btn-primary' + settings.btnClass + '">-></button>'); 
this.after(up); 
up.click(function(){ 
    // code 
});

Также обратите внимание, что при JQuery вызов функции из jQuery.fn, this относится к объекту jQuery, а не к необработанным элементам, поэтому вам не нужно делать $(this).

источник

2013-04-16 15:38:48 Snuffleupagus

Я думаю, что проблема, которую вы испытываете это с обработчиком событий нажмите:

$(".valueUp").click(function() {...})

Селектор, который используется в этой строке выбирает все элементы с классом valueUp. Однако по мере того, как вы добавляете дополнительные элементы управления nudge на страницу, обработчик событий запускается для каждой кнопки на странице, что приводит к тому, что значение подталкивается на столько, сколько есть элементов управления на странице.

Есть несколько вариантов:

Изменить селектор быть идентификатор основан на уникальный идентификатор или изменить селектор, так что по отношению к самому входному контролю.

Вот рабочий пример в jsFiddle: http://jsfiddle.net/Xfp8a/

источник

2013-04-16 15:46:32

функция вызывается несколько раз в JQuery плагин

ответ

Смежные вопросы