JQuery и $ (document) .ready (function()

Я читал много вещей о $ (document) .ready (function() , когда это полезно, так вообще пишу $ (документ). готовы (функция() внутри

, но, почему дьявол, почему KO в так простом случае если вы просто отложили ле $ (документ .... он работает отлично

код:

<?php 
?> 
<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script defer> 
      $(document).ready(function(){ 
       //alert('ready boy'); 
      function changeText(id) { 
       id.innerHTML = "Ooops!"; 
      } 
      }); 
     </script> 
    </head> 
<body> 

<h1 onclick="changeText(this)">Click on this text!</h1> 



</body> 
</html>

источник

2017-01-24 obivatel

'changeText' не доступен из-за пределов' готовности() '. Таким образом, это не сработает. Используйте 'on ('click')' для привязки события. – Tushar

Вам не нужно вводить методы внутри готовой оболочки документа. – epascarello

Не идеальный дубликат, но ответ тот же, функции доступны только в их объеме (в этом случае внутри документа готов). –

Это проблема с прицелом. При использовании устаревших on* указывает, что функция, которую вы вызываете, должна быть определена под номером window. В вашем примере кода вы определили его в рамках готового обработчика jQuery.

Чтобы исправить это, вы можете либо переместить функцию, чтобы быть непосредственно внутри <script> тега, и, следовательно, под window объем:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script defer> 
 
    $(document).ready(function() { 
 
     console.log('ready boy'); 
 
    }); 
 

 
    function changeText(id) { 
 
     id.innerHTML = "Ooops!"; 
 
    } 
 
    </script> 
 
</head> 
 
<body> 
 
    <h1 onclick="changeText(this)">Click on this text!</h1> 
 
</body> 
 
</html>

Альтернативно и предпочтительно, можно удалить атрибут события и приложите обработчик событий, используя ненавязчивый Javascript вместо:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script defer> 
 
    $(document).ready(function() { 
 
     console.log('ready boy'); 
 

 
     $('h1').click(function() { 
 
     this.innerHTML = "Ooops!"; 
 
     // $(this).text('Ooops!'); // alternative 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <h1>Click on this text!</h1> 
 
</body> 
 
</html>

источник

2017-01-24 14:15:06

Во-первых, я бы посоветовал не использовать встроенный JavaScript, как это может быть трудно поддерживать код. Таким образом, вам не нужна именованная функция.

Во-вторых, именованная функция недоступна по всему миру, где находится встроенный код.

Вот демо, показывающий, как вы могли бы подойти к этому:

$(document).ready(function(){ 
 
    //alert('ready boy'); 
 
    $('h1.changeit').on('click', function() { 
 
     $(this).text('Ooops!'); //.html('Ooops!') 
 
     //OR this.innerHTML = "Ooops!"; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h1 class="changeit">Click on this text!</h1>

источник

2017-01-24 14:40:22 PeterKA

ответ

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