Question

我使用jQuery选择的插件进行多选下拉，所有内容都可以正常使用桌面，但在iPad中我试图通过触摸取消选择所选的选项（鼠标点击事件工作正常），它不是在听触摸事件（虽然我写过＃34; touchend＆＃34;事件）。

我应该使用哪个事件来完成这项工作？

Answer 1

jQuery Chosen插件实际上有这个bug。

在控制台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 2

说Kholov的答案适用于现有标签，但不适用于新创建的标签。你可以试试这个:(效率不高但有效）

 //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

解决此问题的最简单最优雅的方法是使用modernizr从TOUCH事件触发CLICK事件。

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

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

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();
    });
}

骇客节快乐：）

jQuery选择的插件：不在iPad上监听触摸事件

4 个答案: