JQuery не работает через CDN от Google

В течение нескольких часов я пытался понять, что не так. Моя цель - включить кнопку после заполнения текстовых полей. Код кажется хорошим в соответствии с моим тестом на JSFiddle, но он все еще не работает на моем сервере. Я что-то пропустил или это проблема с сервером (чего трудно поверить, поскольку javascript является клиентской стороной)?JQuery не работает через CDN от Google

PS: Я не эксперт по HTML, поэтому я не знаю, как определить его синтаксис; если это не так понятно, я сожалею и буду признателен за редактирование. Благодарю.

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" href="css/style.css"> 

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
      <script type="text/javascript"> 
       var $input = $('input:text'), 
       $apply = $('#apply'); 

       $apply.attr('disabled', true); 
       $input.keyup(function() { 
        var trigger = false; 
        $input.each(function() { 
         if (!$(this).val()) { 
          trigger = true; 
         } 
        }); 
        trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled'); 
       }); 
      </script> 
    </head> 

     <body> 
     <section class="container"> 
     <div class="OpenKore"> 
     <div id="absolute"> 
      <form method="GET" action="generate.php"> 
      <fieldset> 
       <legend><h1>OpenKore Automatic Config:</h1></legend> 
       LOGIN: 
       <p><input type="text" id="id_login" name="login_value" value="" placeholder="Login"></p> 
       SENHA: 
       <p><input type="text" id= "id_senha" name="senha_value" value="" placeholder="Senha"></p> 
       PIN: 
       <p><input type="text" id="id_pin" name="pin_value" value="" placeholder="PIN"></p> 

       <input id="apply" type="submit" name="commit" disabled value="Gerar Configurações"> 
      </fieldset> 
      </form> 
     </div> 
     </div> 
     </section> 
     </body> 
    </html>

источник

2014-09-30 Victor Oliveira

jsFiddle обертывает javascript в документе готовым (хорошо загружается). Вы пытаетесь получить доступ к элементам HTML в начале страницы, которые не существуют при запуске кода, заверните в '$ (function() {\\ здесь)};' – OJay

Вы имели в виду, что 'function()' не имеет определение в моем html, так ли это? –

http://learn.jquery.com/using-jquery-core/document-ready/ – j08691

Когда браузер читает вашу HTML-страницу, он читается сверху вниз. Когда он добирается до ваших тегов <script>, он запускает их. Теперь мы делаем это до того, как он доберется до остальной части страницы, то есть до того, как он даже узнает о каких-либо body или form или input:text тегах, поэтому, хотя код будет запущен, он просто ничего не сделает, потому что ни один из элементов на страница существует.

JavaScript 101, заставьте код запускать после загрузки страницы, если вам нужно получить доступ к элементам на странице. Как ты это делаешь? либо поместите код внизу страницы (переместите теги <script> непосредственно перед тегом </body>) или заверните свой код в функцию, которая выполняется после того, как браузер завершил загрузку страницы. Теперь jQuery имеет очень полезный способ сделать это для вас, передать функцию jQuery и будет выполняться после загрузки страницы.

jsFiddle делает это автоматически, следовательно, падение вниз, в верхнем левом углу говорят «OnLoad»

т.е. код

$(); //this is the jQuery function 


//This is your code wrapped in a function called 'yourCode' 
function yourCode() { 
    var $input = $('input:text'), 
      $apply = $('#apply'); 

    $apply.attr('disabled', true); 
    $input.keyup(function() { 
     var trigger = false; 
     $input.each(function() { 
      if (!$(this).val()) { 
       trigger = true; 
      } 
     }); 
     trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled'); 
    }); 
} 

$(yourCode); //this is passing the jQuery function a function, 
      //this will now be execute once the page is loaded 

//or what most people do, pass in as an anonymous function 
//which eliminates a step 

$(function() { 
    var $input = $('input:text'), 
      $apply = $('#apply'); 

    $apply.attr('disabled', true); 
    $input.keyup(function() { 
     var trigger = false; 
     $input.each(function() { 
      if (!$(this).val()) { 
       trigger = true; 
      } 
     }); 
     trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled'); 
    }); 
});

как это было предложено @ j08691 я предложил бы читать о документе готово в jQuery here

источник

2014-09-30 02:25:24 OJay

Ваши объяснения были довольно простыми и понятными; имеет смысл, полностью. Спасибо, спасибо. –

JQuery не работает через CDN от Google

ответ

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