Почему я не могу использовать onClick для выполнения функции внутри функции jQuery $ (document) .ready? - PullRequest
Новая
       0

Почему я не могу использовать onClick для выполнения функции внутри функции jQuery $ (document) .ready?

15 голосов
/ 30 июля 2010

Я новичок в Javascript и jQuery.Я хочу нажать на кнопку и выполнить функцию JS.(В данном примере это просто предупреждение, но на самом деле это функция ajax.)

Появляется первое предупреждение, но после нажатия кнопки я никогда не вижу второе («сделало это») предупреждение.Похоже, javascript не считает, что функция doIt () определяется при нажатии кнопки.

Вот соответствующий код: 

$(document).ready(function()
{ 
    alert('ready');

    function doIt() {
        alert('did it');
    };
}
)

<body>
    <input name="Go" type="button" value="Go" onclick="doIt();"/>
</body>

Ответы [ 8 ]

31 голосов
/ 30 июля 2010

Это потому, что эта функция не находится в глобальном контексте, где ее ищет 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');
}
14 голосов
/ 30 июля 2010

Вы определяете doIt в вашем документе. Уже как оператор функции.

Либо вы должны использовать выражение функции или объявить функцию из функции готовности . 

$(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, но он работает и допускается .

3 голосов
/ 30 июля 2010

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'); }
})
3 голосов
/ 30 июля 2010

Что вам нужно сделать, это привязать к нему событие «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/

1 голос
/ 30 июля 2010 
$(document).ready(function() 
{ 
});

- обработчик событий для document.ready, функции внутри этого обработчика находятся в этой области.

Лучший способ - вставить обработчик для вашего события click внутри, а затем вызвать эту функцию там. 

$(document).ready(function() 
{  
    alert('ready'); 

  $('body input').click(function(){
    doIt();
  });
   function doIt() { 
        alert('did it'); 
    }; 
});

У этого ТАКЖЕ есть побочный эффект удаления кода из вашей разметки (что хорошо), так как вы можете удалить этот клик из входного тега.

0 голосов
/ 30 июля 2010

Да, как уже упоминалось, вам действительно нужно переместить функцию за пределы объявления jquery ready. Также обратите внимание, что javascript чувствителен к регистру, поэтому вы должны использовать onClick, а не onclick. Привет

0 голосов
/ 30 июля 2010

Попробуйте это ... 

$(document).ready(function() {


    alert('ready');


        $("#Go").submit(function(event) {
           alert('did it');
        });

 });

<input name="Go" id="Go" type="button" value="Go" />
0 голосов
/ 30 июля 2010

То, что вы делаете сейчас, - это просто поместите функцию doIt () внутри (для всех целей и целей) события window.onload. Эта функция никогда не будет вызвана за пределами документа.

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

Просто небольшая ссылка для справки: http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...