How to Bind jQuery's tap Event

Question

the following jQuery code will execute every "pagecreate" but I only ever read "I come from the foo down bar." I never, however have read "Where rivers foo and bar thunder!". I can assure you my markup has plenty of division tags.

$(document).on("pagecreate", "#index", function () {
    alert("I come from the foo down bar.");
    $("div").on("tap", function () {
        alert("Where rivers foo and bar thunder!");
        $(this).hide();
    });
});

Here is a simplified example of a failed page:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title><link href="/Content/jquery.mobile-1.4.2.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.theme-1.4.2.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.structure-1.4.2.css" rel="stylesheet"/>
<link href="/Content/themes/mobile.css" rel="stylesheet"/>
<link href="/Content/themes/jquery.mobile.icons.min.css" rel="stylesheet"/>
<link href="/Content/Mobile/Site.css" rel="stylesheet"/>
<link href="/Scripts/jquery-2.1.0.js" rel="stylesheet"/>
<link href="/Scripts/Mobile/Warning.js" rel="stylesheet"/>
<link href="/Scripts/jquery.mobile-1.4.2.js" rel="stylesheet"/>
</head>
<body>
    <form method="post" action="DefaultISH.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="VHiLIso4vJwEKglDsP400Owtzfidxc4g1kzhU450G4jeIhwpxe/oiIWD8Tv7WzOAgPDpiSp229wXt2ML2qVRUPcH+Vh/Do2FlIV7M5yxYug=" />
</div>

    <div id="index" data-role="page">
        <p>Dos eat oats.</p>
    </div>
    </form>

    <script>
        $(document).on("pagecreate", "#index", function () {
            alert("I come from the foo down bar.");
            $(document).on("tap click vclick", "p", function () {
                alert("Where rivers foo and bar thunder!");
                $(this).hide();
            });
        });
    </script>


<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"7a541c555bc144bd927e24c1375eea63"}
</script>
<script type="text/javascript" src="http://localhost:50293/91b671a7150345b7859822835d8e2556/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

For an example of the problem on JSFiddle

For a working example, which I wish to implement.

So now that I have a working example on JSFiddle, I'm thinking the problem may be with with my jQuery Mobile library itself. Nothing worked (adding script references to google's online library for jQuery and JQM) until I added the jQuery framework using JSFiddle. Sorry I'm not very familiar with JSFiddle. — haleonj, May 15 '14 at 16:44

score 1 · Accepted Answer · answered May 15 '14 at 15:20

1

Do it a little bit different, instead of binding it directly to div, bind it to document level and let it propagate do and div element, like this:

$(document).on("pagecreate", "#index", function () {
    alert("I come from the foo down bar.");
    $(document).on("tap click vclick", "div",function () {
        alert("Where rivers foo and bar thunder!");
        $(this).hide();
    });
});

Working example: http://jsfiddle.net/Gajotres/M82UZ/

One last thing tap will not work in all desktop browsers (Firefox) so use vclick instead of a tap and click, it is a jQuery Mobile solution to cross-browser tap support.

answered May 15 '14 at 15:20

Gajotres

57,309
16
102
130

Something else must be different about my surrounding code because the same code that works on jsfiddle and elsewhere is failing for me. I'm using this: bundles.Add(New ScriptBundle("~/bundles/JQM-handicaps").Include( "~/Scripts/jquery-{version}.js", "~/Scripts/jquery-ui{version}.js", "~/Scripts/Handicaps/*.js", "~/Scripts/jquery.mobile-{version}.js", "~/Scripts/jqm-datebox/jqm-datebox.core.js", "~/Scripts/jqm-datebox/jqm-datebox.mode.datebox.js")) – haleonj May 15 '14 at 15:34
This could be a bigger problem, when you bind an event to document level using on method it doesnt matter if element is there or not. Even of page hasn't any div element during execution of this script it will work for any future div element. Basically I don't have a clue whats wrong with your code. – Gajotres May 15 '14 at 15:46
Bet lets look at it a little bit different. Tell me are you using one large HTML file or are you using several HTML files? Second question, do you have several pages (jQuery Mobile pages, not HTML files) with same id? – Gajotres May 15 '14 at 15:49
I'm using a web form page, a master page, several JavaScript pages (jQuery, external file with code above, jQuery Mobile, jQuery Datebox). All JavaScript but the code above was downloaded as a package using NuGet on Visual Studio 2013. – haleonj May 15 '14 at 15:54
I want to know how many jQuery Mobile pages are created as a result? – Gajotres May 15 '14 at 15:58
I just edited my question to include a full page that doesn't work. – haleonj May 15 '14 at 16:02
That much code is not enough. Tell me this, how many div's with attribute data-role="page" do yo have when everything is generated? – Gajotres May 15 '14 at 16:05
I realized that I had forgotten that little bit and just tried that out, but it still doesn't work. So now I have one div with data-role="page" when everything is generated. – haleonj May 15 '14 at 16:08
Lets try something else. Use pageshow instead of pagecreate. – Gajotres May 15 '14 at 16:08

volkinc · Answer 2 · 2014-05-15T16:16:30.180

0

$(document).on("pagecreate", "#index", function () {
    alert("I come from the foo down bar.");
    $("div").bind("tap", function () {
        alert("Where rivers foo and bar thunder!");
        $(this).hide();
    });
});

Change on to bind

    $(document).on("pagecreate", "#index", function () {
    alert("I come from the foo down bar.");
    $("div").on("click", function () {
        alert("Where rivers foo and bar thunder!");
        $(this).hide();
    });
});

Change bind to click

$(document).ready(function(){

alert("I come from the foo down bar.");
$("div").on("click", function () {
    alert("Where rivers foo and bar thunder!");
    $(this).hide();
});

});

edited May 15 '14 at 16:16

answered May 15 '14 at 15:09

volkinc

2,143
1
15
19

I didn't have any luck with that so far. – haleonj May 15 '14 at 15:15
I just edited the question. The page used now will fail before the first alert, meaning `$(document).on...` doesn't event work. There seems to be bigger problems that I originally had thought. – haleonj May 15 '14 at 16:12
That works, but will this solution work after a partial page postback? – haleonj May 15 '14 at 16:21
1

You should not use document ready with jQuery Mobile, it may or may not trigger. Page events exists because of that, and that's precisely the reason why I told you to use pageshow instead of page create. You should learn framework before using it: http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events/14469041#14469041 – Gajotres May 15 '14 at 16:26
should work, but you need to try and test it. let us know if something wrong – volkinc May 15 '14 at 16:32

score -1 · Answer 3 · answered May 15 '14 at 17:05

-1

The problem was bigger than imagined. jQuery Mobile was either the incorrect version or there was a conflict in versions. The problem was ultimately that I installed incompatible NuGet packages.

answered May 15 '14 at 17:05

haleonj

1,438
3
16
30

How to Bind jQuery's tap Event

3 Answers3