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

Я новичок в 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>

Ответ 1

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

Ответ 2

Вы определяете 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 и, вероятно, должен быть заменен обработчиком кликов, определенным в готовой функции, но он работает и разрешен.

Ответ 3

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

Ответ 4

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'); }
})

Ответ 5

$(document).ready(function() 
{ 
});

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

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

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

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

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

Ответ 6

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

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

Просто ссылка для ссылки: http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

Ответ 7

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

$(document).ready(function() {


    alert('ready');


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

 });

<input name="Go" id="Go" type="button" value="Go" />

Ответ 8

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