在jQuery移动页面中加载jQuery脚本

Question

First post.

I have searched extensively for a clear cut answer, however I am more stuck than ever after reading for hours.

What I am trying to accomplish: I would like to be able to load a javascript live search script for 1 page (page1) on a multi page app. The search filters li items in a ul

What I have learned: I have come to the conclusion after much searching that I cannot use document.ready and instead must bind it to pageinit.

$('#page1').live('pageinit', function () {
$("#filter").keyup(function () {

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val();

    // Loop through the comment list
    $(".list li,h2").each(function () {

        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).fadeOut();

            // Show the list item if the phrase matches and increase the count by 1
        } else {
            $(this).show();
        }
    });
});
});

I have tried to alter my conditioning statements and I cannot find a solution.

Here is what I have thus far: http://jsfiddle.net/zb0t/L9t7G/

PS I have also tried simply adding jQuery mobiles data-filter="true" however, I could not figure out how to embed the search field into the header as it would simply stay fixed under the header and I could not call the data-mini="true".

Thanks in advanced!

Answer 1

Look at the console

Uncaught TypeError: Object [object Object] has no method 'live' 

jQuery 1.9 does not have live , that was deprecated in 1.7 and removed in 1.9