Почему выбран jQuery для сбора дублирующих элементов

Question

У меня есть простая сетка элементов li, которую я сделал доступной. Затем я перебираю их после завершения выбора. Но набор элементов, по-видимому, представляет собой набор дубликатов, когда вы выбираете более 1 поля в сетке. Что здесь происходит?

Example can be found here

Answer 1

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

Я изменил свой код, чтобы увидеть это:

elements = $('.ui-selected'); 
console.log(elements); 

Из документации на http://jqueryui.com/demos/selectable/ это говорит о том, что «это событие происходит в конце операции выбора, на каждый элемент, добавленный к выбору. " так что вы видите, это ожидаемое поведение.

Я думаю, что вы хотите, это 'стоп' событие:

$("#selectableGrid").selectable({ 
    stop: function() { 
     elements = $('.ui-selected'); 
     elements.each(function(idx, item) { 
      alert($(item).position().top); 
     }); 
    } 
});​ 

Answer 2

Вместо привязки к selected события, попробуйте привязки к stop события, как это:

stop: function() { 
    elements = null; 
    elements = $('.ui-selected'); 
    elements.each(function(idx, item) { 
     alert($(item).position().top); 

    }); 
} 

Выбранное событие будет срабатывать один раз для каждого элемента, который вы выбираете, а затем ваша функция будет также запускаются каждый раз, тем самым основываясь на списке выбранных элементов. Вместо этого вместо этого используется событие остановки, функция запускается только один раз для выбранного элемента.

jsFiddle example.

Answer 3

Обратный вызов selected вызывается один раз для каждого выбранного элемента. Внутри этого обратного вызова вы затем запрашиваете все выбранные элементы и предупреждаете о каждом из них.

Конечный результат заключается в том, что когда вы выбираете, например, 2 элемента, для первого элемента вызывается ваш обратный вызов selected, и вы получаете одно предупреждение для этого элемента. Затем ваш обратный вызов вызывается для второго элемента, и в это время теперь выбрано два элемента, и теперь вы получаете еще 2 предупреждения (всего 3). Выбрав 3-й элемент, вы получите 6 предупреждений и т. Д.

Во всяком случае, это , почему его часть в отношении поведения, которое вы видите. Проверьте ответ @ j08691 на решение, которое показывает поведение, которое вы, вероятно, собираетесь делать.