jQuery Mobile 多选点击事件

Posted 2023-03-12

【中文标题】jQuery Mobile 多选点击事件

【英文标题】：jQuery Mobile multi select click event

【发布时间】：2012-09-04 21:42:54

【问题描述】：

如何在 jQuery Mobile 多选中触发点击事件？

我正在尝试在选择选项中添加一个关闭按钮，因为我不觉得 (X) 关闭按钮是直截了当的。此处讨论此主题 (http://***.com/questions/10004719/jquery-mobile-multi-select-box)，答案是：

您可以添加关闭作为选项，然后在单击时触发对话框关闭方法

不讨论如何触发点击事件。我尝试了以下方法：

$("#selectmenu").change(function() 
alert('Changed!!'););

$(document).delegate('.ui-selectmenu-screen', 'click', function () 
alert('changed');
).delegate('.ui-selectmenu .ui-btn-inner', 'click', function (event) 
alert('changed2'););

$('#selectmenu').on('change', function () 
alert('changed'););

$('#selectmenu').live('change', function () 
alert('changed'););

$('#pageName').on('click', '.ui-selectmenu-list > li', function () 
alert('changed'););

$("#selectmenu").live( "click", function(event, ui) 
alert('changed'););

$("#selectmenu").bind( "click", function(event, ui) 
alert('changed'););

【参考方案1】：

您将使用 $.selectmenu() 方法 found here 并绑定到 change 事件，如下所示：

HTML

<div data-role="fieldcontain">
    <select name="selectmenu" id="selectmenu" multiple="multiple">
        <option value="value1">Value 1</option>
        <option value="value2">Value 2</option>
        <option value="value3">Value 3</option>
        <option value="close">Close</option>
    </select>
</div>

关闭选择菜单

$(document).delegate('#selectmenu', 'change', function()
    var str = $('#selectmenu option:selected').val(); // Get Value of Option

    if (str == 'close')
        $('#selectmenu').selectmenu('close');
    
);

添加价值

function addValues($el)
    var total = 0;
    $('option', $el).each(function()
        var value = parseInt($(this).val());
            value = (isNaN(value-0)) ? 0 : parseInt(value); // Defaults Value to 0 if NaN

        total += value;
    );
    return total;

JSFiddle for Add Values

我希望这会有所帮助！

【讨论】：

非常感谢您的帮助。出于某种原因，我需要使用 .live 而不是 .bind 来使触发器功能起作用。看到它是多选，我使用以下内容检查是否单击了“关闭”： if($.inArray('Close',selected) > -1 ) $('#selectmenu').selectmenu('close ');在我离开页面后，是否有从我的选择菜单选择的选项列表中删除“关闭”选项？我有一个数字选择菜单，我将其转换为我执行计算的整数数组。目前“关闭”选项已转换为 NaN。

@user1299792 我建议使用 $.delegate() 而不是 $.live()。对于关闭选项，您可以执行 isNan() 检查并将其默认为零或忽略它，而不是删除它。我添加了一个示例 Add Values 函数作为示例。祝你好运！