JQuery，更改不同點擊按鈕

我正在設置一個註冊表單，並使用JQuery在按'next'後更改按鈕類型。JQuery，更改不同點擊按鈕

這目前的作品，但我希望在按'後'的情況下按鈕恢復。

我的代碼如下。

 $(function() { 
      $('#next').on('click', function() { 
       $('.reg-page-1').animate({'left': '-105%'}); 
       $('.reg-page-2').animate({'left': '0px'}); 

       $('.btn-next-1').html('<button type="submit" class="btn btn-submit-1 btn-success btn-lg btn-block"><span class="glyphicon glyphicon-flash"></span> Submit!</button>'); 

      }); 

      $('#back').on('click', function() { 
       $('.reg-page-1').animate({'left': '10%'}); 
       $('.reg-page-2').animate({'left': '115%'}); 

       $('btn-submit-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>'); 
      }); 
     });

下面是關於HTML的區塊。

<div class="btn-toolbar" style="width:100%;"> 
    <div class="btn-back-1" style="width:49%;float:left;"> 
     <button id="back" type="button" class="btn btn-default btn-lg btn-block" aria-expanded="false">Back </button> 
    </div> 
    <div class="btn-next-1" style="width:49%;float:right;"> 
     <button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button> 
    </div> 
    </div>

UPDATE

我已經更新了JS的下方

$(function() { 
     $('#next').on('click', function() { 
      $('.reg-page-1').animate({'left': '-105%'}); 
      $('.reg-page-2').animate({'left': '0px'}); 
      $('.btn-next-1').html('<button type="submit" class="btn btn-submit-1 btn-success btn-lg btn-block"><span class="glyphicon glyphicon-flash"></span> Submit!</button>'); 

     }); 

     $('#back').on('click', function() { 
       $('.reg-page-1').animate({'left': '10%'}); 
       $('.reg-page-2').animate({'left': '115%'}); 
       $('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>'); 
      }); 
});

不過，我現在，我發現自己在一個陌生的問題。

該按鈕確實有效，它改變了我的應用程序的狀態。

但是，一旦「返回」被點擊並且按鈕切換回「下一個」。「下一步」按鈕似乎不起作用或再次切換到「提交」按鈕。

換句話說，似乎這些功能只能工作一次。

來源

2015-09-08 Andrew Mata

那是什麼BTN提交-1 ??? – Arjun

我認爲你的代碼應該可以工作。我發現你的'btn-submit-1'選擇器缺少'＃back'點擊處理器中的'.' – Sachin

一切似乎是確定的，但你沒有任何選擇「BTN-提交-1」，與修正你的後退按鈕的代碼必須是這樣的：

$('#back').on('click', function() { 
      $('.reg-page-1').animate({'left': '10%'}); 
      $('.reg-page-2').animate({'left': '115%'});    
      $('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>'); 
     });

來源

2015-09-08 00:23:09 cperez

我做了更正並添加了一些編輯細節，看來這些功能只能運行一次。 –

當你從javascript創建html，DOM無法讀取id時，會發生這種情況，所以請將你的事件按鈕更改爲：$（'。btn-next-1'）。on（'click'，' （），函數（）{ – cperez

謝謝！現在一切都很好。 –

您應該將第二個選擇器更改爲與第一個選擇器相同。因爲使用.html（）您正在更改nex的容器div的內容，但該div仍然存在。如果你使用：

$('#back').on('click', function() { 
      $('.reg-page-1').animate({'left': '10%'}); 
      $('.reg-page-2').animate({'left': '115%'}); 

      $('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>'); 
     });

將返回到原來的狀態。

來源

2015-09-08 00:22:46 piyuj

我做了更正並添加了一些編輯細節，看起來這些函數只能運行一次。 –

JQuery，更改不同點擊按鈕

回答

相關問題