Проблемы с событием изменения события jQuery

У меня возникла проблема с событием изменения jQuery timepicker для запуска. Мне нужно обновить поле сразу после выбора времени. Вот код до сих порПроблемы с событием изменения события jQuery

<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>

Это сокращенный код, но он все равно должны делать то, что я пытаюсь заставить его сделать. То, что мне нужно, это время, выбранное с помощью inpute с идентификатором. D_time должно обновлять значение по умолчанию, как описано в приведенной выше функции, но по какой-то причине я не могу заставить его запускать. Прежде чем я использовал опцию выбора для времени, и она работает нормально, этот метод я не знаю.

Я не использую javascript или jquery часто, небольшая помощь будет оценена. Я прочитал документацию по событию изменения, но это не помогло.

Заранее спасибо.

источник

2016-07-06 Ed Dunn

Вы можете вызвать ваши действия благодаря "changeTime" событие timepicker.js (doc). Btw, ваша версия 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

еще не срабатывает –

Поместите предупреждение в случае. Вы уверены, что вход имеет этот идентификатор? Просто оставьте предупреждение внутри события, чтобы быть уверенным, что – 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

ответ

Смежные вопросы