jQuery simple button bind

Я новичок в jQuery, так что это должен быть простой вопрос.jQuery simple button bind

Насколько я понимаю, я могу связать способ слушать события, такие как нажатие кнопки, с помощью

$('#buttonID').bind('click', function(){//some code});

Однако, это не работает для меня, так что я должен делать что-то не так.

Это мой простой HTML-файл:

 <!doctype html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script> 
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script> 
    <script src='test.js'></script> 
    </head> 

    <body> 
    <input id="SignIn" type="button" value="Sign In"></input> 
    </body> 
    </html>

Помимо загрузки файлов Jquery, он загружает файл test.js, который выглядит следующим образом:

// JavaScript Document 
$('#SignIn').bind('click', function() {alert('hi');});

Это не достаточно для связывания? Я надеялся, что это запустит диалоговое окно с предупреждением, но это не так, похоже, обратный вызов вообще не выполняется.

Что здесь не так? Оба файла (html и js) расположены в одном каталоге, и Google Chrome не жалуется ни на что в консоли JavaScript, поэтому с этой целью все должно быть хорошо.

Спасибо за помощь!

источник

2014-09-05 hansa

Вам нужен '$ (документ) .ready' функцию, прочитайте документацию для JQuery, это почти в каждом Например, это первая вещь, которую вы будете учиться. – adeneo

Кроме того, используйте 'on', а не' bind' – adeneo

@adeneo он использует jQuery 1.3.2 mate, –

Оберните свой код в document ready обработчиком. Он принимает функцию, выполняемую при полной загрузке DOM.

Как вы используете JQuery 1.3

$(document).ready(function() { 
    $('#SignIn').bind('click', function() { 
     alert('hi'); 
    }); 
});

Для JQuery 1.7+,

$(document).ready(function() { 
    $('#SignIn').on('click', function() { 
     alert('hi'); 
    }); 
});

Кроме того, как из JQuery 1.7, метод .on() является предпочтительным способом для прикрепления обработчиков событий к документу ,

источник

2014-09-05 11:38:06 Satpal

Ах да, быстрый и простой ответ. Благодаря! Отметьте как ответ, как только SO позволит мне это сделать. – hansa

$(function(){ 
    $('#SignIn').bind('click', function() {alert('hi');}); 
})

источник

2014-09-05 11:38:51 ainu

Попробуйте

$(function(){ 
    $('#SignIn').click(function() {alert('hi');}); 
});

источник

2014-09-05 11:38:53 kefy

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

//Write some code here 

});

источник

2014-09-05 11:39:36 user2412232

Вы можете попробовать это.

$(document).ready(function(){ 
    $('#SignIn').on('click', function() {alert('hi');}); 

});

источник

2014-09-05 11:41:10 Dileep

Пожалуйста, объясните, что не так с кодом OP и почему это решает проблему, отредактировав ваш ответ. –

Переместите свой Javascript в нижней части HTML-страницы, прямо над тегом закрывающего тела.

Таким образом, DOM готов к загрузке, и нет необходимости в вызовах $(document).ready().

https://developer.yahoo.com/performance/rules.html#js_bottom

источник

2014-09-05 11:41:34

Вы можете включить ваши JavaScript файлы в самом низу, и все должно работать, как ожидалось. Рекомендуется сделать это и включить CSS файлов вверху (тег заголовка). Для получения дополнительной информации см. Ссылку, прилагаемую @Grim ...

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<input id="SignIn" type="button" value="Sign In"></input> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script> 
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script> 
<script src='test.js'></script> 
</body> 
</html>

источник

2014-09-05 11:42:36 PeterKA

Вы можете использовать это.

$(document).ready(function() { $("#SignIn").click(function() { alert('demo'); }); });

источник

2014-09-05 11:45:42 prog1011

# user2606742 - Если ответ полезен, нажмите «правильно» и дайте «upvote», чтобы он помог другим узнать правильное решение. – prog1011

jQuery simple button bind

ответ

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