Простая функция размытия jQuery не работает

У меня есть один из тех моментов, когда я не могу получить простой кусок кода для работы. Несмотря на то, что я потратил чуть больше часа на это, я не могу заставить этот кусок кода работать;Простая функция размытия jQuery не работает

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title><?php echo 'Test'; ?></title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"><!-- jQuery stylesheet --> 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><!-- jQuery libary --> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script><!-- jQuery UI --> 
</head> 
<body> 

<script> 
$("#target").blur(function() { 

    alert("Handler for .blur() called."); 

}); 
</script> 

<form> 
    <input id="target" type="text" value="Field 1"> 
    <input type="text" value="Field 2"> 
</form> 

</body> 
</html>

Я запустить свой код через HTML 5 валидатор, чтобы гарантировать, что не было что-то глупо, и я обеспечил Я использую последнюю версию JQuery. Странно, я могу заставить код работать на jsFiddle.

источник

2015-06-14 Michael LB

потому что ваш скрипт работает до того, как сделан входной элемент, либо поместить скрипт в нижней части или использовать '$ (документ). ready'. И он будет работать в jsFiddle, потому что по умолчанию код, который вы помещаете в js-окно, запускается onload –

скрипт не получает идентификатор цели, помещает скрипт в нижнюю часть тела – Newinjava

$(function(){ 

    $("#target").blur(function() { 

     alert("Handler for .blur() called."); 

    }); 
});

Вам необходимо обновить свой скрипт до указанного выше. Это добавляет обертку.

Вы связываете событие, используя jquery. Однако нет необходимости, чтобы при выполнении вашего скрипта jquery был загружен к тому времени, следовательно, привязка не происходит, поэтому функция не запускается.

Вам нужно добавить оболочку на готовом jquery, который гарантирует, что вся привязка событий и выполнение скриптов выполняется после того, как dom готов.

Здесь я создал plunker для вас с рабочей версии - http://plnkr.co/edit/Xhur8f1ur194ii6XlRby?p=preview

источник

2015-06-14 16:53:02 nikhil

Спасибо. Я знал, что это будет просто! –

Ваш приветствуем Майкл. – nikhil

поставить функцию в document.ready

<script> 
$(document).ready(function(){ 
    $("#target").blur(function() { 

    alert("Handler for .blur() called."); 
    }); 
}); 
</script>

или поместить тег сценария в конце тела

источник

2015-06-14 16:53:23 user3227295

Пожалуйста оберните код js в

$(function(){ 

// your code 
});

это будет быть

<script> 
    $(function(){ 
     $("#target").blur(function() { 
     alert("Handler for .blur() called."); 
     }); 
    }); 
    </script>

Вот ссылка https://api.jquery.com/ready/

источник

2015-06-14 16:54:03 user86745458

Добавьте его в готовую функцию

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("input").blur(function(){ 
 
     alert("This input field has lost its focus."); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
Enter your name: <input type="text"> 
 
<p>Write something in the input field, and then click outside the field to lose focus (blur).</p> 
 

 
</body> 
 
</html>

источник

2015-06-14 16:55:08

Ваш JavaScript работает до того, как input элементы отображаются, так что нет ничего для присоединения события. Переместите ваш скрипт в конец страницы или оберните его в . Выполнение последнего заставляет сценарий ждать события DOMReady, запущенного браузером перед выполнением.

Вариант 1:

<body> 
    <form> 
    <input id="target" type="text" value="Field 1"> 
    <input type="text" value="Field 2"> 
    </form> 
    <script> 
    $("#target").blur(function() { 
     alert("Handler for .blur() called."); 
    }); 
    </script> 
</body>

Вариант 2:

<body> 
    <script> 
    $(function(){ 
     $("#target").blur(function() { 
     alert("Handler for .blur() called."); 
     }); 
    }); 
    </script> 
    <form> 
    <input id="target" type="text" value="Field 1"> 
    <input type="text" value="Field 2"> 
    </form> 
</body>

источник

2015-06-14 17:00:57

Простая функция размытия jQuery не работает

ответ

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