Выбранный jQuery плагин: не слушает сенсорное событие в iPad

Question

Я использую плагин jQuery-выбран для выпадающего списка, все отлично работает с рабочим столом, но в iPad, когда я пытался отменить выбор выбранной опции касанием (событие щелчка мыши работает нормально), он не слушает касание событие (хотя я написал событие "touchend").

какое событие я должен использовать, чтобы сделать эту работу?

Answer 1

Самый простой и элегантный способ решить эту проблему - просто вызвать событие CLICK из события TOUCH с помощью modernizr.

$.getScript('/js/modernizr-custom.js', function() {

    if (Modernizr && Modernizr.touchevents) {
        $('.chosen-choices').on('touchend', '.search-choice-close', function(){
            $(this).trigger('click');
       });  
    }
});

Answer 2

Ответ Холова будет работать для существующих тегов, но не для вновь созданных тегов. Вы можете попробовать это: (не эффективно, но работает)

 //Fix the remove item on touch devices
if (Modernizr && Modernizr.touch) {
    $('.chosen-choices').on('touchend', '.search-choice-close', function(){
        var $this = $(this);
        var $select = $this.closest('.chosen-container').prev('select');
        var toRemove = $.trim($this.parent().text());
        var vals = $select.val();
        vals = $.grep(vals, function(value) {
            return $.trim(value).trim() !== toRemove;
        });
        $select.val(vals).trigger('chosen:updated');
   });
}

Answer 3

Плагин jQuery Chosen на самом деле имеет эту ошибку.

Протестировал этот код в консоли http://harvesthq.github.io/chosen/ Работает

var x = document.getElementsByClassName("search-choice-close");
//search-choice-close is class of X button.
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener('touchend', function(e) {
       this.parentNode.remove()
    }, false);
}

Answer 4

Есть 2 проблемы 1- кнопка удаления не работает 2- при нажатии на добавление меню не открывается после добавления первого пункта:

Просто взломайте его, используя:

1- добавить слушателя, чтобы проверить, когда ваше раскрывающееся меню изменилось:

$(".chosen-select").chosen().change(updateChosen);

2- создать функцию, как это сделал я для ее обработки:

function updateChosen(){
        $(".search-choice-close").on("touchend", function () {
        $(this).trigger("click");
    });
    //Open Menu again 
    $(".chosen-choices").on("touchend", function(){
        $(this).find(".chosen-search-input").blur().focus();
    });
}

С Днем взлома:)