0
我已經創建了此測試頁面，以解決我遇到的問題。jQuery Mobile：動態表單創建顯示本地控件v/s jQuery Mobile插件控件
我第一次點擊'表單'選項卡時，瀏覽器顯示jQuery Mobile複選框。然後，如果我點擊「主頁」選項卡並再次點擊「表單」標籤，它會顯示瀏覽器的原生複選框！
我在這裏做錯了什麼？如何解決它？
在此先感謝！
的index.html：
<!doctype html>
<html>
<head>
<title>Form Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
var value1;
var value2;
// remap jQuery to $
(function($) {
})(window.jQuery);
/* trigger when page is ready */
$(document).ready(function() {
initialize();
});
/**
* Initialize the page.
*
*/
function initialize() {
// get server parameters befor making ajax call
getFormValues();
// add click handler to the application navigation menu options
$("nav li").live('click', function(e) {
});
}
/**
* Gets server parameters from the application's configuration file.
*
*/
function getFormValues() {
// get the server URL from external XML file
$.ajax({
type : "GET",
url : "assets/config/formValues.xml",
cache : false,
async : false,
timeout : 5000,
dataType : "xml",
success : function(xml) {
$(xml).each(function() {
value1 = $(this).find('value1').text();
value2 = $(this).find('value2').text();
});
}
});
}
// Listen for any attempts to call changePage()
$(document).bind("pagebeforechange", function(e, data) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if(typeof data.toPage === "string") {
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var u = $.mobile.path.parseUrl(data.toPage);
if(u.hash.search(/^#formSection/) !== -1) {
currentContentSection = "formSection";
// We're being asked to display the items for a specific category.
// Call our internal method that builds the content for the category
// on the fly based on our in-memory category data structure.
displayValueFilters();
// Make sure to tell changePage() we've handled this call so it doesn't
// have to do anything.
e.preventDefault();
}
}
});
/**
* Sets up and displays values.
*
*/
function displayValueFilters() {
var pageSelector = "#formSection";
// Get the page we are going to dump our content into
var $page = $(pageSelector);
// get the div that's expected to have the search fields
var $searchFields = $page.children(":jqmData(role=sclRole)")
// Get the content area element for the page.
var $content = $page.children(":jqmData(role=content)");
// The markup we are going to inject into the content area of the page.
var markup = "";
markup += "<label for='value1'>" + value1 + "</label>";
markup += "<input type='checkbox' name='value1' id='value1' />";
markup += "<label for='value2'>" + value2 + "</label>";
markup += "<input type='checkbox' name='value2' id='value2' />";
$content.empty();
$(markup).appendTo($content).trigger("create");
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
// Now call changePage() and tell it to switch to the page we just modified.
$.mobile.changePage($page, options);
}
</script>
</head>
<body>
<!-- home page section -->
<section id="homePageSection" data-role="page" data-title="Form Test - Home">
<div data-role="header">
<h1>Form Test</h1>
<nav data-role="navbar">
<ul>
<li>
<a href="#" class="ui-btn-active ui-state-persist" >Home</a>
</li>
<li class="formLineItem">
<a href="#formSection">Form</a>
</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content" class="container">
<h1>Form - Home Page</h1>
</div><!-- /content -->
<div data-role="footer"></div><!-- /footer -->
</section><!-- /homePageSection -->
<!-- form section -->
<section id="formSection" data-role="page" data-title="Form Test - Form">
<div data-role="header">
<h1>Form Test</h1>
<nav data-role="navbar">
<ul>
<li>
<a href="#homePageSection">Home</a>
</li>
<li class="formLineItem">
<a href="#" class="ui-btn-active ui-state-persist" >Form</a>
</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content" class="container">
</div><!-- /content -->
<div data-role="footer"></div><!-- /footer -->
</section><!-- /formSection -->
</body>
</html>
資產/配置/ formValues.xml：
<formValues>
<value1>Videos</value1>
<value2>Images</value2>
</formValues>
更新代碼的工作原理：
<!doctype html>
<html>
<head>
<title>Form Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
// data used to generate checkboxes
var value1;
var value2;
// flag that determines the page has already been initialized
var pageInitialized = false;
// flag that determines if the dynamic form has already been created from the loaded data
var formCreated = false;
// remap jQuery to $
(function($) {
})(window.jQuery);
// trigger when page is ready
$(document).ready(function() {
initialize();
});
/**
* Initialize the page.
*
*/
function initialize() {
// get server parameters befor making ajax call
getFormValues();
// set the flag indicating that the page has already been initialized
pageInitialized = true;
}
/**
* Gets server parameters from the application's configuration file.
*
*/
function getFormValues() {
// get the server URL from external XML file
$.ajax({
type : "GET",
url : "assets/config/formValues.xml",
cache : false,
async : false,
timeout : 5000,
dataType : "xml",
success : function(xml) {
$(xml).each(function() {
value1 = $(this).find('value1').text();
value2 = $(this).find('value2').text();
});
}
});
}
// Listen for any attempts to call changePage()
$(document).bind("pagebeforechange", function(e, data) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if(typeof data.toPage === "string") {
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var u = $.mobile.path.parseUrl(data.toPage);
if(u.hash.search(/^#formSection/) !== -1) {
currentContentSection = "formSection";
// if the form has not yet been created, proceed to creat it
if(!formCreated) {
// if the page hasn't been initialized (data not loaded), proceed to initialize
// this happens when the user refreshes the page when on 'Form' tab
if(!pageInitialized) {
initialize();
}
// generate the form controls from the loaded data and add them to the page
displayValueFilters();
formCreated = true;
// Make sure to tell changePage() we've handled this call so it doesn't
// have to do anything.
e.preventDefault();
}
}
}
});
/**
* Sets up and displays values.
*
*/
function displayValueFilters() {
var pageSelector = "#formSection";
// Get the page we are going to dump our content into
var $page = $(pageSelector);
// The markup we are going to inject into the content area of the page.
var markup = "";
markup += "<label for='value1'>" + value1 + "</label>";
markup += "<input type='checkbox' name='value1' id='value1' />";
markup += "<label for='value2'>" + value2 + "</label>";
markup += "<input type='checkbox' name='value2' id='value2' />";
$("#valueCheckboxes").empty();
$(markup).appendTo("#valueCheckboxes").trigger("create");
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
// Now call changePage() and tell it to switch to the page we just modified.
$.mobile.changePage($page, options);
}
</script>
</head>
<body>
<!-- home page section -->
<section id="homePageSection" data-role="page" data-title="Form Test - Home">
<div data-role="header">
<h1>Form Test</h1>
<nav data-role="navbar">
<ul>
<li>
<a href="#" class="ui-btn-active ui-state-persist" >Home</a>
</li>
<li class="formLineItem">
<a href="#formSection">Form</a>
</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content" class="container">
<h1>Form - Home Page</h1>
</div><!-- /content -->
<div data-role="footer"></div><!-- /footer -->
</section><!-- /homePageSection -->
<!-- form section -->
<section id="formSection" data-role="page" data-title="Form Test - Form">
<div data-role="header">
<h1>Form Test</h1>
<nav data-role="navbar">
<ul>
<li>
<a href="#homePageSection">Home</a>
</li>
<li class="formLineItem">
<a href="#" class="ui-btn-active ui-state-persist" >Form</a>
</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content" class="container">
<form method="get" action="">
<div data-role="fieldcontain">
<!-- input field for toc search -->
<label id="searchLabel" for="searchInput"><strong>Search terms:</strong></label>
<input type="search" name="searchInput" id="searchInput" value="" />
</div>
<div style="text-align: left">
<fieldset id="valueCheckboxes" data-role="controlgroup" data-type="horizontal"></fieldset>
</div>
<div data-role="fieldcontain">
<a href="#" id="searchButton" data-role="button" data-inline="true">Search</a>
</div>
</form>
</div><!-- /content -->
<div data-role="footer"></div><!-- /footer -->
</section><!-- /formSection -->
</body>
</html>
謝謝賈斯珀...你的建議，以確保我不初始化表單控件多次真的幫助。 爲了確保我不會多次初始化，因爲用戶多次點擊該選項卡，我最終添加了一對標誌。我不確定是否有更好的方法來處理這種情況。 – 2012-04-18 00:09:04