0
私はAJAXを使用してデータを折りたたみ可能なウィジェットのリストビューにプルするJquery Mobileページを用意しています。多くの場合、リストビューを含む10以上の折りたたみウィジェットがあります。Jquery Mobile Ajaxの問題
折りたたみ可能なウィジェットを開くと、AJAX関数が呼び出され、データが取り込まれます。これは問題なく機能します。
1秒折りたたみ可能なウィジェットが両方のウィジェットのために、AJAX機能火災を開いているとき）：私はそれらのいずれかを閉じずに2つの折りたたみ可能なウィジェットを開いたときに
しかし、私は、問題が発生しています。最初に開いたウィジェットでAJAX関数を起動させたくありません。
ご協力いただきありがとうございます。私のコードは以下の通りです。あなたのセレクタは常にグローバルである、すなわち、$（ "kitid"）
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Edit Kits</title>
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
<link rel="stylesheet" href="themes/Auer.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
<div data-role="page" id="editkits" class="type-interior">
<div data-role="header">
<h1>Edit Kits</h1>
<a href="SPI_SearchLink" data-icon="home" class="ui-btn-left">Home</a>
<a data-rel="back" data-icon="back" class="ui-btn-right">Back</a>
<div class="header-sub">
<div class="ui-bar center-text"><img src="images/logo.png" id="logo" alt="spi_Cname"/></div>
</div>
<div data-role="navbar" class="navbar">
<ul>
<li><a href="SPI_TOCLink" data-theme="c">TOC</a></li>
<!-- SPI_HTML_ShowSearchMenu -->
<li><a href="SPI_SearchLink" data-theme="c">Search</a></li>
<!-- SPI_HTML_ShowSearchMenu -->
<!-- SPI_HTML_AllowKits -->
<li><a href="SPI_KitsLink" class="ui-btn-active" data-theme="c">Kits</a></li>
<!-- SPI_HTML_AllowKits -->
<!-- SPI_HTML_AllowSales -->
<li><a href="SPI_SalesLink" data-theme="c">SPI_SalesMenuText</a></li>
<!-- SPI_HTML_AllowSales -->
<!-- SPI_HTML_AllowOrderPlacement -->
<li><a href="SPI_ShopingCartLink" data-theme="c">Cart</a></li>
<!-- SPI_HTML_AllowOrderPlacement -->
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<!-- SPI_No_Kit_Message -->
<div class="ui-grid-a">
<div class="ui-bar ui-bar-e center-text">
<br>
<h2>You have no saved Kits.</h2>
<p>To create a kit, add products to your shopping
cart and click "save as kit" on the menu at the bottom of your display.</p>
</div>
</div>
<!-- SPI_No_Kit_Message -->
<!-- SPI_HTML_HdrOnlyKit -->
<div data-role="collapsible" data-collapsed="true" data-content-theme="d">
<h3 id="SPI_KitId" class="kit">SPI_KitName SPI_KitNote</h3>
<div class="kitid"></div>
</div>
<!-- SPI_HTML_HdrOnlyKit -->
<!-- SPI_HTML_Kit -->
<form name="SPI_KitFormName" method="post" action="WebCatPageServer.exe">
<input name="Action" type="hidden" value="Not_Set" />
<input name="IsAjax" type="hidden" value="Yes" />
<input name="KitId" type="hidden" value="SPI_KitId" />
<input name="SearchTerm" type="hidden" value="Not_Set" />
<ul data-role="listview" id="list" data-inset="true" data-split-icon="delete" data-split-theme="d">
<!-- SPI_HTML_Kit_Product1 -->
<li><a href="javascript:document.ShoppingCart.Action.value='ItemLookup';document.ShoppingCart.SearchTerm.value='SPI_CartLookupPartNum';document.ShoppingCart.submit();">
<!-- SPI_KitProdItemNum -->
<h2>SPI_KitProdPartNum</h2>
<!-- SPI_KitProdItemNum -->
<p class="description">SPI_KitProdDesc</p>
<p><input type="text" name="SPI_KitOrdQtyFieldName" onBlur="clickrecall(this,'0')" tabindex="SPI_KitOrdQtyTabIndex" value="SPI_KitProdQty" onfocus="document.SPI_KitFormName.Action.value='Recalc_Kit';SPI_KitOrdQtyFieldName.select()"/></p>
<p>Unit Price: SPI_KitProdPrice</p>
<p>Ext. Price: <span class="price">SPI_KitProdExtPrice</span></p>
</a>
<!-- SPI_HTML_KitsAllowEdit -->
<a href="javascript:document.SPI_KitFormName.SPI_KitOrdQtyFieldName.value='DEL';document.SPI_KitFormName.Action.value='Recalc_Kit';document.SPI_KitFormName.submit();">Delete</a>
<!-- SPI_HTML_KitsAllowEdit -->
</li>
<!-- SPI_HTML_Kit_Product1 -->
<!-- SPI_HTML_Kit_Product2 -->
<li><a href="javascript:document.ShoppingCart.Action.value='ItemLookup';document.ShoppingCart.SearchTerm.value='SPI_CartLookupPartNum';document.ShoppingCart.submit();">
<!-- SPI_KitProdItemNum -->
<h2>SPI_KitProdPartNum</h2>
<!-- SPI_KitProdItemNum -->
<p class="description">SPI_KitProdDesc</p>
<p><input type="text" name="SPI_KitOrdQtyFieldName" onBlur="clickrecall(this,'0')" tabindex="SPI_KitOrdQtyTabIndex" value="SPI_KitProdQty" onfocus="document.SPI_KitFormName.Action.value='Recalc_Kit';SPI_KitOrdQtyFieldName.select()"/></p>
<p>Unit Price: SPI_KitProdPrice</p>
<p>Ext. Price: <span class="price">SPI_KitProdExtPrice</span></p>
</a>
<!-- SPI_HTML_KitsAllowEdit -->
<a href="javascript:document.SPI_KitFormName.SPI_KitOrdQtyFieldName.value='DEL';document.SPI_KitFormName.Action.value='Recalc_Kit';document.SPI_KitFormName.submit();">Delete</a>
<!-- SPI_HTML_KitsAllowEdit -->
</li>
<!-- SPI_HTML_Kit_Product2 -->
</ul>
<div data-role="controlgroup" data-type="horizontal">
<a href="javascript:document.SPI_KitFormName.Action.value='Delete_Kit';document.SPI_KitFormName.submit();" data-role="button" data-theme="c">Delete Kit</a>
<!-- SPI_HTML_KitsAllowEdit -->
<a href="#" onClick="javascript:document.EditKits1.Action.value='Recalc_Kit';" data-role="button" data-theme="c">Save Kit</a>
<!-- SPI_HTML_KitsAllowEdit -->
<a href="#" onClick="javascript:document.SPI_KitFormName.Action.value='ClearQtys_Kit';document.SPI_KitFormName.submit();" data-role="button" data-theme="c">Clear Qty's</a>
<!-- SPI_HTML_AllowOrderPlacement -->
<a href="javascript:document.SPI_KitFormName.Action.value='AddKitToCart';document.SPI_KitFormName.submit();" data-role="button" data-theme="b">Add to Cart</a>
<!-- SPI_HTML_AllowOrderPlacement -->
</div>
</form>
<!-- SPI_HTML_Kit -->
</div><!-- /content -->
<div data-role="footer" id="footer" data-position="fixed">
<h4>© Auer Steel 2011</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
のjQuery
$("h3.kit").live('click', function() {
$(".kitid").empty().html('<img src="images/load.gif" />');
var kitid = this.id;
var url = 'http://68.188.40.182/WebCat/WebCatPageServer.exe?AJAX&Action=Open_Kit&KitID=' + kitid;
$.ajax({
url: url,
dataType: "html",
cache: false,
success: ajaxCallDone,
complete: function() {},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error type :" + errorThrown + " Error message :" + XMLHttpRequest.responseXML + " textStatus: " + textStatus);
}
});
function ajaxCallDone(data) {
$(".kitid").html(data);
try {
$('ul#list').listview('refresh');
} catch (e) {
$('ul#list').listview();
}
jQuery('#editkits').page("destroy").page();
}
});