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

时间：2014-04-25 21:38:26

标签： javascript jquery events jquery-mobile click

好的，我已经多次看到这个问题，甚至解决方案也适用于其他用户。但没有人满足我的需要。

简而言之，我正在使用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>

希望这会澄清一些事情。再次感谢大家。

1 个答案:

答案 0 :(得分：0)

首先，似乎已弃用$.mobile.changePage，您可能会考虑使用PageContainer.change()代替。

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

当changePage动态加载新内容时，新按钮不会绑定onclick个事件。

您最好的选择是使用：

$(document).on("click", "selector", ...handler...);
相关问题
最新问题