Jquery timepicker更改事件的問題

我遇到了jquery timepicker更改事件觸發的問題。我需要在選擇時間後立即更新字段。這裏是代碼到目前爲止Jquery timepicker更改事件的問題

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Deploment Management</title> 

     <link rel="stylesheet" type="text/css" href="style/tabs.css"> 
     <link rel="stylesheet" type="text/css" href="style/style.css"> 
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.css"> 
     <link href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css" rel="stylesheet"> 

     <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> 
     <script type="text/javascript" src="js/jquery.easyui.min.js"></script> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.js"></script> 

     <script> 
      $(function(){ 
       $('#time').timepicker({ 
        timeFormat: 'h:mm p', 
        interval: 15, 
        dynamic: true, 
        dropdown: true, 
        scrollbar: true 
       }); 

       $('#time').on('change', function() { 
        var x = document.getElementByName("time").value; 
        document.getElementById('d_time').value = "Maintenance Tonight - " +x; 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td class="right">Scheduled Time:</td> 
       <td> 
        <input type="text" name="time" class="full" id="time" /> 
       </td> 
      </tr> 
      <tr> 
       <td class="right">Email Subject:</td> 
       <script> 
        function subject() { 
         if (document.getElementById('default').checked) { 
          document.getElementById('default_subject').style.display = 'block'; 
          document.getElementById('custom_subject').style.display = 'none'; 
         } 
         else if (document.getElementById('custom').checked) { 
          document.getElementById('custom_subject').style.display = 'block'; 
          document.getElementById('default_subject').style.display = 'none'; 
         } 
        } 
       </script> 
       <td> 
        <input type="radio" onclick="javascript:subject();" id="default" name="radio" checked value="default">Default Subject 
        <input type="radio" onclick="javascript:subject();" id="custom" name="radio" value="custom">Custom Subject 
       </td> 
      </tr> 
      <tr> 
      <td/> 
      <td> 
       <div id="subject_field"> 
        <div id="default_subject" style="display:block" name="default"> 
         <input name="default" id="d_time" value="" readonly="readonly"/> 
        </div> 
        <div id="custom_subject" style="display:none" name="custom"> 
         <input name="custom" /> 
        </div> 
       </div> 
      </td> 
      </tr> 
     </table> 
    </body> 
</html>

這是縮寫的代碼，但它仍然應該做我想要做的事情。我需要做的是一次選擇帶有ID的輸入d_time應該更新上述函數中描述的默認值，但由於某種原因，我無法觸發它。在我使用時間選擇選項並且工作正常之前，這種方法我毫無頭緒。

我不經常使用javascript或jquery，有一點幫助，將不勝感激。我閱讀了有關更改事件的文檔，但它並沒有真正的幫助。

在此先感謝。

來源

2016-07-06 Ed Dunn

你可以觸發你的行動得益於「changeTime」 timepicker.js的事件（doc）。順便說一句，你的timepicker.js版本是舊的。所以，你可以試試這個：

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Deploment Management</title> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.css"> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.js"></script> 
     <script> 
      $('document').ready(function(){ 
       $('#time').timepicker(); 
       $('#time').on('changeTime', function() { 
        var x = $("#time").val(); 
        $('#d_time').val("Maintenance Tonight - " +x); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td class="right">Scheduled Time:</td> 
       <td> 
        <input type="text" name="time" class="full" id="time" /> 
       </td> 
      </tr> 
      <tr> 
       <td class="right">Email Subject:</td> 
       <script> 
        function subject() { 
         if ($('#default').is(':checked')) { 
          $('#default_subject').css('display','block'); 
          $('#custom_subject').css('display','none'); 
         } 
         else if ($('#custom').is(':checked')) { 
          $('#custom_subject').css('display','block'); 
          $('#default_subject').css('display','none'); 
         } 
        } 
       </script> 
       <td> 
        <input type="radio" onclick="subject();" id="default" name="radio" checked value="default">Default Subject 
        <input type="radio" onclick="subject();" id="custom" name="radio" value="custom">Custom Subject 
       </td> 
      </tr> 
      <tr> 
      <td/> 
      <td> 
       <div id="subject_field"> 
        <div id="default_subject" style="display:block" name="default"> 
         <input name="default" id="d_time" value="default" readonly="readonly"/> 
        </div> 
        <div id="custom_subject" style="display:none" name="custom"> 
         <input name="custom" type="text" value="custom"/> 
        </div> 
       </div> 
      </td> 
      </tr> 
     </table> 
    </body> 
</html>

來源

2016-07-06 21:21:44

正如你所提到的，添加更新後的庫實際上解決了問題，現在我只需要它正確彈出（彈出和關閉屏幕）並使用格式選項。我應該能夠找到這些信息。謝謝 –

把上改變功能開準備的文件

$(document).ready(function() { 
    $('#time').on('change', function() { 
    var x = document.getElementByName("time").value; 
    document.getElementById('d_time').value = "Maintenance Tonight - " +x; 
    }); 
}

的事情是元素不在時創建你火了functon所以你需要等待，直到該文件已準備就緒或把這個功能在文件的末尾。

來源

2016-07-06 20:33:16 xploshioOn

仍然不火 –

把一個警報事件。是確定輸入有這個ID？只需在活動中留下警示，以確保 – xploshioOn

$(function(){ 
 
       $('#time').timepicker({ 
 
        timeFormat: 'h:mm p', 
 
        interval: 15, 
 
        dynamic: true, 
 
        dropdown: true, 
 
        scrollbar: true 
 
       }); 
 

 
       $('#time').on('change', function() { 
 
        var x = document.getElementsByName("time")[0].value; 
 
        document.getElementById('d_time').value = "Maintenance Tonight - " +x; 
 
       }); 
 
      });

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.css"> 
 
     <link href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css" rel="stylesheet"> 
 

 
     
 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.js"></script> 
 

 

 
<table> 
 
      <tr> 
 
       <td class="right">Scheduled Time:</td> 
 
       <td> 
 
        <input type="text" name="time" class="full" id="time" /> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td class="right">Email Subject:</td> 
 
       <script> 
 
        function subject() { 
 
         if (document.getElementById('default').checked) { 
 
          document.getElementById('default_subject').style.display = 'block'; 
 
          document.getElementById('custom_subject').style.display = 'none'; 
 
         } 
 
         else if (document.getElementById('custom').checked) { 
 
          document.getElementById('custom_subject').style.display = 'block'; 
 
          document.getElementById('default_subject').style.display = 'none'; 
 
         } 
 
        } 
 
       </script> 
 
       <td> 
 
        <input type="radio" onclick="javascript:subject();" id="default" name="radio" checked value="default">Default Subject 
 
        <input type="radio" onclick="javascript:subject();" id="custom" name="radio" value="custom">Custom Subject 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
      <td/> 
 
      <td> 
 
       <div id="subject_field"> 
 
        <div id="default_subject" style="display:block" name="default"> 
 
         <input name="default" id="d_time" value="" readonly="readonly"/> 
 
        </div> 
 
        <div id="custom_subject" style="display:none" name="custom"> 
 
         <input name="custom" /> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      </tr> 
 
     </table>

試試這個

   $('#time').on('change', function() { 
        var x = document.getElementsByName("time")[0].value; 
        document.getElementById('d_time').value = "Maintenance Tonight - " +x; 
       });

因爲getElementByName不與第一個元素的索引功能使用getElementsByName代替

來源

2016-07-06 20:40:58

仍不會觸發該事件，它可能依賴於瀏覽器？ –

此處的代碼在我們手動更改輸入框中的時間時作出響應，但不是在我們從列表中選擇時。 –

Jquery timepicker更改事件的問題

回答

相關問題