没有页面刷新，点击功能不会触发答案

【问题标题】：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&param2=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?width="+ $('input[name=widthRadio]:checked').val() + "&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>&nbsp;LBS</div>
               <br />

             <table align="center" border="0" cellspacing="5" cellpadding="5" width="400px">
  <tr>
    <td width="33%"><input id="7" type="button" value="7"></td>
    <td width="33%"><input id="8" type="button" value="8"></td>
    <td width="33%"><input id="9" type="button" value="9" ></td>
  </tr>
  <tr>
    <td width="33%"><input id="4" type="button" value="4" ></td>
    <td width="33%"><input id="5" type="button" value="5" ></td>
    <td width="33%"><input id="6" type="button" value="6" ></td>
  </tr>
  <tr>
    <td width="33%"><input id="1" type="button" value="1" ></td>
    <td width="33%"><input id="2" type="button" value="2" ></td>
    <td width="33%"><input id="3" type="button" value="3" ></td>
  </tr>
  <tr>
    <td width="33%"><input id="0" type="button" value="0"></td>
    <td width="33%"><input id="backspace" type="button" value="&larr;BKSP" ></td>
    <td width="33%"><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。因此，您可能会丢失脚本或根本没有调用它。您需要查看这些函数和它们链接到的任何页面事件。一些代码将帮助我们与您一起调试它。
谢谢，我已经添加了代码..

标签： javascript jquery events jquery-mobile click

【解决方案1】：

首先，$.mobile.changePage 似乎已被弃用，您不妨考虑改用PageContainer.change()。

由于信息有限，可能很难给你一个完整的答案。 我的假设是您使用$("selector").click(...) 来定义点击事件。

当 changePage 动态加载新内容时，新按钮没有绑定onclick 事件。

您最好的选择是使用：

$(document).on("click", "selector", ...handler...);

【讨论】：

pagecontainer.change() 让表单元素可见..??并且没有点击文件的运气......之前尝试过：（谢谢！
我已更正...pagecontainer.change 运行良好我没有指定正确的选择器。虽然点击仍然没有运气：/谢谢！