How to Bind jQuery's tap Event

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

سؤال

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.

هل كانت مفيدة؟

المحلول

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.

نصائح أخرى

$(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();
});

});

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.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top