Почему я не могу использовать onClick для выполнения функции в $ jQuery (документ) .ready функция?
Я плохо знаком с JavaScript и jQuery. Я хочу нажать кнопку и выполнить функцию js. (Для этого примера это - просто предупреждение, но это - на самом деле функция ajax.)
Первое предупреждение появляется, но после того, как я нажимаю кнопку, я никогда не вижу, второе ("сделал это"), предупреждение. Похоже, что JavaScript не думает мелкая монета (), функция определяется, когда кнопка нажата.
Вот соответствующие нормы:
$(document).ready(function()
{
alert('ready');
function doIt() {
alert('did it');
};
}
)
<body>
<input name="Go" type="button" value="Go" onclick="doIt();"/>
</body>
8 ответов
Это потому, что эта функция не находится в глобальном контексте, где ее ищет ваш onclick="". Вам нужно переместить ее за пределы document.ready (чтобы она не была привязана исключительно к этому закрытию), или (лучший подход IMO) привязать ее внутри document. ready, вот что я имею в виду под каждым:
Привязка внутри (для этого уберите onclick=""):
$(document).ready(function() {
alert('ready');
$("input[name='Go']").click(doIt);
function doIt() {
alert('did it');
}
});
или анонимная версия (снова уберите onclick=""):
$(document).ready(function() {
alert('ready');
$("input[name='Go']").click(function() {
alert('did it');
});
});
Или переместите его наружу (сохраните onclick=""):
$(document).ready(function() {
alert('ready');
});
function doIt() {
alert('did it');
}
Вы определяете doIt в своем документе document.ready как оператор функции.
Либо вы должны использовать выражение функции или объявить функцию вне функции готовности .
$(document).ready(function()
{
alert('ready');
doIt = function() { //now has global scope.
alert('did it');
};
}
)
<body>
<input name="Go" type="button" value="Go" onclick="doIt();"/>
</body>
(да, onClick на самом деле не является способом выполнения jQuery и, вероятно, его следует заменить обработчиком кликов, определенным в функции ready, но он работает и разрешен .
Что вам нужно сделать, так это привязать событие "click" к нему с помощью jquery, как показано ниже.
jQuery(document).ready(function($) {
$('#my_button').click(function() {
alert('i was clicked');
});
});
<input type="button" id="my_button" value="Go" />
Вот живая демонстрация jsfiddle для вас: http://jsfiddle.net/8A5PR/
Вот страница руководства для вас: http://api.jquery.com/click/
В Javascript есть два вида области видимости, глобальная и на уровне функции. Если вы объявите doIt внутри функции, он не будет виден вне функции. Есть несколько способов исправить это
//just declare the function outside the ready function
$(function() {
});
function doIt() { alert('did it'); }
//decare a variable outside the function
var doIt;
$(function() {
doIt = function() { alert('did it'); }
});
// if you dont use var, variables are global
$(function() {
doIt = function() { alert('did it'); }
})
$(document).ready(function()
{
});
- это обработчик событий для document.ready, функции внутри этого обработчика находятся в этой области.
Лучше всего вставить внутрь обработчик события щелчка, а затем вызвать эту функцию там.
$(document).ready(function()
{
alert('ready');
$('body input').click(function(){
doIt();
});
function doIt() {
alert('did it');
};
});
Это ТАКЖЕ имеет побочный эффект удаления кода из вашей разметки (что хорошо), поскольку вы можете удалить этот onclick из своего входного тега.
Да, как упоминалось другими, вам действительно нужно переместить функцию за пределы объявления готовности jquery. Также обратите внимание, что javascript чувствителен к регистру, поэтому вам следует использовать onClick, а не onclick. С уважением
То, что вы сейчас делаете, это просто помещаете функцию doIt() внутрь (для всех намерений и целей) события window.onload. Эта функция никогда не будет вызвана за пределами document.ready, если только вы не привяжете ее к элементу, потому что она застряла внутри области видимости document.ready.
Вам нужно переместить вашу функцию за пределы document.ready, чтобы она могла быть вызвана внешними событиями.
Небольшая ссылка для справки: http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3
Попробуйте это ...
$(document).ready(function() {
alert('ready');
$("#Go").submit(function(event) {
alert('did it');
});
});
<input name="Go" id="Go" type="button" value="Go" />