没有页面刷新，点击功能不会触发
Posted
技术标签:
【中文标题】没有页面刷新，点击功能不会触发【英文标题】：Click functions do not fire without page refresh 【发布时间】：2014-06-11 18:44:03 【问题描述】：好的，我已经多次看到这个问题了，甚至解决方案也适用于其他用户。但是没有一个能满足我的需要。
简而言之，我正在使用 Jquery Mobile 作为触摸屏桌面浏览器应用程序的 UI。
我的索引页面仅包含 2 个 jqm 页面（#page1、#page2），每个点击事件在 DOM 就绪功能中都可以正常工作。但是，当我在#page2 之后通过
更改为外部页面时$.mobile.changePage("newPage.php?param1=1¶m2=2"), transition : "slide" );
参数传递得很好，但是，我的点击事件现在都不需要刷新页面。当我重新加载页面时，一切都是肉汁，但是我再次注意到，如果我从外部页面导航回我的索引页面，除非完成刷新，否则我仍然会遇到同样的问题。
任何见解将不胜感激......注意到那里甚至可以远程工作。而且我不会使用页面刷新来解决问题。提前谢谢你。
对于没有代码示例，我深表歉意，我认为我的问题相当琐碎。就这样吧。。
文档 1(index.php) Javascript
<script>
$(document).ready(function()
////////Home Functions
$( "#issueSpinCoilBtn").click(function()
$.mobile.changePage( "#issueToSpin1", transition : "slide" );
);
$( "#issueRollBalanceBtn").click(function()
$.mobile.changePage( "#issueToRollBalance1", transition : "slide" );
);
/////////Issue To spin page 1 functions
$( "#11InBtn").click(function()
$.mobile.changePage( "#issueToSpin2", transition : "slide" );
);
$( "#15InBtn").click(function()
$.mobile.changePage( "#issueToSpin2", transition : "slide" );
);
$( "#18InBtn").click(function()
$.mobile.changePage( "#issueToSpin2", transition : "slide" );
)
$( "#navRestartFromSpinPage1").click(function()
$.mobile.changePage( "#home", transition : "slide" );
$("#selectionsForm")[0].reset();
);
$( "#findCoilBtn1").click(function()
$.mobile.changePage( "issueToSpinResults1.php?&gauge=" + $('input[name=gaugeRadio]:checked').val() + "&color=" + $("#selectColor").val(), transition : "slide" );
$("#selectionsForm")[0].reset();
);
);///END DOM READY
</script>
文档 1(index.php) HTML 正文
<body>
<div data-role="page" class="ui-body-a" id="home" name="home">
<div data-role="header">
</div><!-- /header -->
<div role="main" class="ui-content" style="padding:50px;">
<h1>Please select form the following options:</h1>
<div align="center">
<input id="issueSpinCoilBtn2" name="issueSpinCoilBtn2" data-icon="arrow-r" data-iconpos="top" value="Issue Spin Coil Inventory" type="button"><br /><br /><br />
<input id="issueSpinCoilBtn" name="issueSpinCoilBtn" data-icon="arrow-r" data-iconpos="top" value="Issue Spin Coil Inventory from NON TRACKED LOT" type="button"><br /><br /><br />
<input id="issueRollBalanceBtn" name="issueRollBalanceBtn" data-icon="arrow-r" data-iconpos="top" value="Issue Roll Balance Inventory" type="button">
</div>
</div><!-- /content -->
<div data-role="footer" data-fullscreen="true" data-position="fixed">
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" class="ui-body-a" id="issueToSpin1" name="issueToSpin1">
<div data-role="header">
</div><!-- /header -->
<div role="main" class="ui-content" style="padding:50px;">
<h1 align="center">Issuing to Spin Coil Inventory from NON TRACKED LOT</h1><br />
<div align="center">
<form id="selectionsForm" name="selectionsForm">
<fieldset data-role="controlgroup" data-type="horizontal" data-inline="true">
<legend align="center"><h3>Select Coil Width:</h3></legend>
<input name="widthRadio" id="widthRadio1" value="11.8750" type="radio">
<label for="widthRadio1">11.8750"</label>
<input name="widthRadio" id="widthRadio2" value="15.0000" type="radio">
<label for="widthRadio2">15.0000"</label>
<input name="widthRadio" id="widthRadio3" value="18.0000" type="radio">
<label for="widthRadio3">18.0000"</label>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal" data-inline="true">
<legend align="center"><h3>Select Coil Gauge:</h3></legend>
<input name="gaugeRadio" id="gaugeRadio1" value=".0270" type="radio">
<label for="gaugeRadio1">0.027"</label>
<input name="gaugeRadio" id="gaugeRadio2" value=".0320" type="radio">
<label for="gaugeRadio2">0.032"</label>
</fieldset>
<span data-inline="true">
<label for="selectColor" class="select"><h3 align="center">Select a Color</h3></label>
<select name="selectColor" id="selectColor" data-native-menu="false">
<option>Colors</option>
<?
while ($rowAllColors = mssql_fetch_array($allColorQuery))
echo "<option value=\"$rowAllColors[ColorCode]\">$rowAllColors[ColorName]</option>";
?>
</select>
</span>
</form>
</div>
</div><!-- /content -->
<div data-role="footer" style="overflow:hidden;" data-fullscreen="true" data-position="fixed">
<div data-role="navbar">
<ul>
<!-- <li><a id="navBackFromSpin1" name="navBackFromSpin1" href="#" data-icon="arrow-l">Go Back</a></li> -->
<li><a id="navRestartFromSpinPage1" name="navRestartFromSpinPage1" data-icon="refresh">Start Over</a></li>
<li><a id="findCoilBtn1" name="findCoilBtn1" data-icon="arrow-r" data-rel="external" >Find Coil</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
文档 2(issueToSpinResults1.php) Javascript
$(document).ready(function()
$('#goBackToOptions').click(function()
$.mobile.changePage( "index.php#issueToSpin1", transition : "slide" );
);
$('#navRestart').click(function()
$.mobile.changePage( "index.php", transition : "slide" );
);
$('#printTagBtn').click(function()
var datastring = "itemID=" + $('input[name=coilChoice]:checked').val() + "&weight=" + $('#coil_weight').html();
$.ajax(
type: "POST",
url: "doCreateSpinTag1.php",
data: datastring,
success: function(data)
$.mobile.changePage( "index.php", transition : "slide" );
);
);
$('#0').click(function()
$('#coil_weight').html( $('#coil_weight').html() + '0' )
);
$('#1').click(function()
$('#coil_weight').html( $('#coil_weight').html() + '1' )
);
$('#2').click(function()
$('#coil_weight').html( $('#coil_weight').html() + '2' )
);
$('#3').click(function()
$('#coil_weight').html( $('#coil_weight').html() + '3' )
);
$('#4').click(function()
$('#coil_weight').html( $('#coil_weight').html() + '4' )
);
$('#5').click(function()
$('#coil_weight').html( $('#coil_weight').html() + '5' )
);
$('#6').click(function()
$('#coil_weight').html( $('#coil_weight').html() + '6' )
);
$('#7').click(function()
$('#coil_weight').html( $('#coil_weight').html() + '7' )
);
$('#8').click(function()
$('#coil_weight').html( $('#coil_weight').html() + '8' )
);
$('#9').click(function()
$('#coil_weight').html( $('#coil_weight').html() + '9' )
);
$('#backspace').click(function()
$('#coil_weight').html(
function(index,value)
return value.substr(0,value.length-1);
)
);
$('#clear').click(function()
$('#coil_weight').html('');
);
);///END DOM READY
文档 2(issueToSpinResults1.php) HTML
<body>
<div data-role="page" class="ui-body-a" id="spinresults1" name="spinresults1">
<div data-role="header">
</div><!-- /header -->
<div role="main" class="ui-content" style="padding:50px;">
<h1>Here is what we found:</h1>
<div align="center">
<?
///////////select all matching coil//////
if(mssql_num_rows($coilMatchesQuery) != 0)
echo "<fieldset data-role=\"controlgroup\">
<legend>Select Coil and Enter Weight to Create Tag:</legend>";
$i = 1;
while ($rowCoilMatches = mssql_fetch_array($coilMatchesQuery))
echo "<input name=\"coilChoice\" id=\"coilChoice$i\" value=\"".trim($rowCoilMatches['ItemNo'])."\" type=\"radio\">
<label for=\"coilChoice$i\">".trim($rowCoilMatches['ItemNo'])." - ".trim($rowCoilMatches['Description'])."</label>";
$i++;
echo "</fieldset>";
//End If
else
echo "<h3>0 Coil Matches</h3>";
//End Else
?>
<div id="weight" align="center">
<h2 align="center">Enter Weight</h2>
</div>
<div align="center" style="font-size:36px; font-weight:bold;"><span id="coil_weight" style="font-size:36px; font-weight:bold;"></span> LBS</div>
<br />
<table align="center" border="0" cellspacing="5" cellpadding="5" >
<tr>
<td ><input id="7" type="button" value="7"></td>
<td ><input id="8" type="button" value="8"></td>
<td ><input id="9" type="button" value="9" ></td>
</tr>
<tr>
<td ><input id="4" type="button" value="4" ></td>
<td ><input id="5" type="button" value="5" ></td>
<td ><input id="6" type="button" value="6" ></td>
</tr>
<tr>
<td ><input id="1" type="button" value="1" ></td>
<td ><input id="2" type="button" value="2" ></td>
<td ><input id="3" type="button" value="3" ></td>
</tr>
<tr>
<td ><input id="0" type="button" value="0"></td>
<td ><input id="backspace" type="button" value="←BKSP" ></td>
<td ><input id="clear" type="button" value="CLEAR"></td>
</tr>
<tr>
</tr>
</table>
<div style="width:400px; margin-left:auto; margin-right:auto;"><a href="" data-iconpos="right" data-icon="arrow-r" data-role="button" id="printTagBtn">Print Coil Tag</a></div>
</div><!-- /content -->
<div data-role="footer" style="overflow:hidden;" data-fullscreen="true" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a id="navRestart" name="navRestart" data-icon="refresh" data-transition="slide" >Start Over</a></li>
<li><a id="goBackToOptions" name="goBackToOptions" data-icon="arrow-l" data-transition="slide" >Change Options</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
希望这能澄清一些事情。再次感谢大家。
【问题讨论】：
也许如果你在问题中加上minimal, complete example of the problem，它会帮助人们帮助你。 听起来你的代码设置不正确。当您浏览现场页面时，它们会在 Dom 中四处走动。但是，如果您刷新页面或导航离开，这实际上是直接点击 epage 而不是使用 ajax。因此，您可能会丢失脚本或根本没有调用它。您需要查看这些函数和它们链接到的任何页面事件。一些代码将帮助我们与您一起调试它。 谢谢，我已经添加了代码.. 【参考方案1】：首先，$.mobile.changePage 似乎已被弃用，您不妨考虑改用PageContainer.change()。
由于信息有限，可能很难给你一个完整的答案。 我的假设是您使用$("selector").click(...) 来定义点击事件。
当 changePage 动态加载新内容时，新按钮没有绑定onclick 事件。
您最好的选择是使用：
$(document).on("click", "selector", ...handler...);
【讨论】：
pagecontainer.change() 让表单元素可见..??并且没有点击文件的运气......之前尝试过：（谢谢！ 我已更正...pagecontainer.change 运行良好我没有指定正确的选择器。虽然点击仍然没有运气：/谢谢！以上是关于没有页面刷新，点击功能不会触发的主要内容，如果未能解决你的问题，请参考以下文章