Привязка Ajax-кода jQuery для мобильной страницы ASP.NET MVC3 с использованием события PageInit
Мы пишем приложение JQueryMobile, используя ASP.NET MVC3 + JqueryMobile RC1. У немногих страниц есть свои собственные методы Ajax, которые мы вызываем с помощью кода jQuery ($.getJSON()) метод.
Чтобы вызвать их в вызовах Ajax, мы делаем привязки событий click внутри события "pageinit" jquery-mobile, как упомянуто здесь (http://jquerymobile.com/demos/1.0rc1/docs/api/events.html). Но вызов метода, привязанного к pageinit, увеличивается на +1 при каждом посещении страницы. например если я снова зайду на свою страницу с помощью кнопки назад или по любой другой ссылке, зайдите на нее снова, метод pageinit вызывается дважды, и любой код, написанный внутри pageinit, выполняется два раза ... они увеличиваются с каждым посещением страницы.
Какое событие мы должны использовать, чтобы связать события. а это надо вызывать только один раз при загрузке страницы?
Изменить: - Мы хотим AJAX по умолчанию поведение JQM, и мы сохранили AjaxEnabled в true.
Пример исходного кода (вы можете повторить эту проблему, создав новое приложение MVC3 и заменив ниже три .cshtml на данный код: -
Мой _Layout.cshtml: -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
@RenderSection("HeaderScripts", required: false)
</head>
<body>
<div data-role="page" id="@ViewBag.DivTitle">
<div data-role="header">
<h1>
@ViewBag.Title
</h1>
<a href="/Home/About" data-role="Button" data-icon="info" data-iconpos="notext">About</a>
<a href="/Home/Index" data-role="Button" data-icon="home" data-iconpos="notext">Home</a>
</div>
<div data-role="content" id="DivContent">
@RenderBody()
@RenderSection("BodyScriptsSection", required: false)
</div>
<div data-role="footer" data-position="fixed">
@RenderSection("MobileFooter", required: false)
</div>
</div>
</body>
</html>
Образец Index.cshtml
@{
ViewBag.Title = "Home Page";
ViewBag.DivTitle = "HomeIndex";
}
@section BodyScriptsSection {
<script type="text/javascript">
$("#@ViewBag.DivTitle").live("pageshow", function () {
alert ("PageShow Called - HomeIndex");
});
</script>
Образец AboutUS.cshtml
@{
ViewBag.Title = "About Us";
ViewBag.DivTitle = "AboutUS";
}
@section BodyScriptsSection {
<script type="text/javascript">
$("#@ViewBag.DivTitle").live("pageshow", function () {
alert("PageShow Called - AboutUS");
});
</script>