mobileinit initSelector not working

StackOverflow https://stackoverflow.com/questions/21078250

题

Using jQM 1.4, I am working on a custom select widget, with [data-role='toggleselect'], like so:

<select data-role="toggleselect">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

For this, I need my select element to not be enhanced. From what I have read in the jQM 1.4 API here and understand, I should be able to use the following to prevent my select from being enhanced by the primary mobile.selectmenu widget:

$( document ).on( "mobileinit", function() {
    $.mobile.selectmenu.prototype.initSelector += ":not(:jqmData(role='toggleselect'))";
});

Here is my jsfiddle showing that this doesn't work. My select element is still being enhanced. And yes, this is placed after loading jQuery but before jQM.

For further experimentation, I hardcoded the following initSelector into the jQM-1.4.js file under the mobile.selectmenu widget:

initSelector: "select:not(:jqmData(role='slider')):not(:jqmData(role='flipswitch')):not(:jqmData(role='toggleselect'))"

When this is hardcoded, my select is not enhanced, thus works as expected.

Below is a copy/paste of my file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>mobile.toggleselect</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $( document ).on( "mobileinit", function() {
                $.mobile.selectmenu.prototype.initSelector += ":not(:jqmData(role='toggleselect'))";
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h3>mobile.toggleselect</h3>
            </div>
            <div data-role="content">
                <select data-role="toggleselect">
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
        </div>
    </body>
</html>

Again, if I download a local copy of the jquery.mobile-1.4.0.js file and hardcode the initSelector for mobile.selectmenu, it works as expected.

So... what am I missing? Or is this a bug?

有帮助吗？

解决方案

It looks like a mistake in jQuery Mobile API 1.4 documentation.

To assign a custom initSelector

$.mobile.widget.initSelector = ".selector";

Demo

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top