Javascript 无法读取未定义的属性“jqmData”

请在我的代码中提供帮助，我想在J Query Mobile中使用过滤器进行选择 我尝试了下面的代码，它成功地过滤了数据，但当选择一个选项时，它不会返回任何东西并返回此错误

Cannot read property 'jqmData' of undefined

这是我在java脚本中使用的代码

 <form>
    <div class="ui-field-contain">
        <label for="select-custom-20">Long list:</label>
        <select name="select-custom-20" id="select-custom-20" data-native-menu="false" class="filterable-select">
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>


        </select>
    </div>
</form>

  ( function( $ ) {
function pageIsSelectmenuDialog( page ) {
    var isDialog = false,
        id = page && page.attr( "id" );
    $( ".filterable-select" ).each( function() {
        if ( $( this ).attr( "id" ) + "-dialog" === id ) {
            isDialog = true;
            return false;
        }
    });
    return isDialog;
}
$.mobile.document

    .on( "selectmenucreate", ".filterable-select", function( event ) {
        var input,
            selectmenu = $( event.target ),
            list = $( "#" + selectmenu.attr( "id" ) + "-menu" ),
            form = list.jqmData( "filter-form" );

        if ( !form ) {
            input = $( "<input data-type='search'></input>" );
            form = $( "<form></form>" ).append( input );
            input.textinput();
            list
                .before( form )
                .jqmData( "filter-form", form ) ;
            form.jqmData( "listview", list );
        }

        selectmenu
            .filterable({
                input: input,
                children: "> option[value]"
            })

            .on( "filterablefilter", function() {
                selectmenu.selectmenu( "refresh" );
            });
    })

    .on( "pagecontainerbeforeshow", function( event, data ) {
        var listview, form;

        if ( !pageIsSelectmenuDialog( data.toPage ) ) {
            return;
        }
        listview = data.toPage.find( "ul" );
        form = listview.jqmData( "filter-form" );
        data.toPage.jqmData( "listview", listview );
        listview.before( form );
    })

    .on( "pagecontainerhide", function( event, data ) {
        var listview, form;
        if ( !pageIsSelectmenuDialog( data.toPage ) ) {
            return;
        }
        listview = data.prevPage.jqmData( "listview" ),
        form = listview.jqmData( "filter-form" );
        listview.before( form );
    });
})( jQuery );

这是java脚本

 <form>
    <div class="ui-field-contain">
        <label for="select-custom-20">Long list:</label>
        <select name="select-custom-20" id="select-custom-20" data-native-menu="false" class="filterable-select">
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>


        </select>
    </div>
</form>

  ( function( $ ) {
function pageIsSelectmenuDialog( page ) {
    var isDialog = false,
        id = page && page.attr( "id" );
    $( ".filterable-select" ).each( function() {
        if ( $( this ).attr( "id" ) + "-dialog" === id ) {
            isDialog = true;
            return false;
        }
    });
    return isDialog;
}
$.mobile.document

    .on( "selectmenucreate", ".filterable-select", function( event ) {
        var input,
            selectmenu = $( event.target ),
            list = $( "#" + selectmenu.attr( "id" ) + "-menu" ),
            form = list.jqmData( "filter-form" );

        if ( !form ) {
            input = $( "<input data-type='search'></input>" );
            form = $( "<form></form>" ).append( input );
            input.textinput();
            list
                .before( form )
                .jqmData( "filter-form", form ) ;
            form.jqmData( "listview", list );
        }

        selectmenu
            .filterable({
                input: input,
                children: "> option[value]"
            })

            .on( "filterablefilter", function() {
                selectmenu.selectmenu( "refresh" );
            });
    })

    .on( "pagecontainerbeforeshow", function( event, data ) {
        var listview, form;

        if ( !pageIsSelectmenuDialog( data.toPage ) ) {
            return;
        }
        listview = data.toPage.find( "ul" );
        form = listview.jqmData( "filter-form" );
        data.toPage.jqmData( "listview", listview );
        listview.before( form );
    })

    .on( "pagecontainerhide", function( event, data ) {
        var listview, form;
        if ( !pageIsSelectmenuDialog( data.toPage ) ) {
            return;
        }
        listview = data.prevPage.jqmData( "listview" ),
        form = listview.jqmData( "filter-form" );
        listview.before( form );
    });
})( jQuery );

---

我只是在使用中的示例使用长选择器时遇到了这个问题。该错误似乎是特定于版本的。在撰写本文时，我最初使用的是JQM的最新版本

https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js

如果我将其更改为1.4.2版，错误就会消失。我还没有调查原因，但您可以尝试一个早期版本，看看是否可以让您的代码以这种方式工作

编辑：通过更改到较低版本，我失去了使用自动建议功能的能力，因此现在我正在调试，以试图找出原始代码的错误

在.prevPage节点中，没有.jqmData的条目，不确定原因。

替换此行

listview = data.prevPage.jqmData( "listview" )

用这两条线：

listview = data.toPage.find( "ul" );
listview = data.toPage.jqmData( "listview", listview );

---

它为我解决了问题。我使用的是jQuery Mobile 1.4.5。

您能在定义了selectmenu后将其记录下来并列出变量吗？