Функция не вызывается в событии onclick

Question

Я хочу добавить HTML в конец каждой ссылки на YouTube, чтобы открыть плеер в litebox. Это мой код:

$(document).ready(function() {
  var valid_url = new RegExp('youtube\.com\/.*v=([a-zA-Z0-9_-]+)');
  var image_data = 'base64 encoded image';

  init();

  function init() {
    $('a').each(function() {
      if (valid_url.test($(this).attr('href'))) {
        $(this).after( ' <img src="' + image_data + '" onclick="open_litebox(\'hi\');" />' );
      }
    });
  }

  function open_litebox(param) {
    alert(param);
  }
});

Это работает до такой степени, что он вставляет некоторый HTML после ссылки на YouTube, например так:

<img src="base 64 data" onclick="open_litebox('hi')">

Но когда я нажимаю эту кнопку, функция open_litebox() не вызывается. Глядя в консоль ошибок, я вижу сообщение об ошибке open_litebox is not defined, но я определил его.

Я совершенно не понимаю, что здесь происходит, может кто-нибудь протянуть мне руку?

Спасибо.

Answer 1

Это распространенная проблема, когда вы впервые начинаете работать с jQuery.Проблема здесь в том, что вы определили функцию в области jQuery, что означает, что она недоступна, просто вызывая ее как обычную функцию.Решение вашей проблемы состоит в том, чтобы переместить определение вашей функции за пределы написанной вами анонимной готовой функции, например:

$(document).ready(function() {

    // do your stuff here

});

// define your functions here 
function my_func() {

}

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

Answer 2

Другие ответы верны в том, что перемещение вашей декларации my_func за пределы $(document).ready() решит вашу проблему, но я хотел бы прояснить причину, потому что она не имеет ничего общего с jQuery, в частности.

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

Поскольку вы определили my_func в функции обратного вызова, она не видна из глобальной области и, следовательно, не может быть вызвана из свойства onclick элемента img вашей страницы.

В JavaScript область видимости находится на уровне функций.Все, что не входит в функцию, попадает в глобальную область видимости.

Answer 3

Ваша open_litebox функция входит в сферу действия другой функции, поэтому она не видна глобально.Вместо того, что вы делаете, попробуйте использовать .click():

• http://api.jquery.com/click/

Что-то вроде этого:

$(this).after( ' <img src="' + image_data + '" id='abc' />' );
$('#abc').click(open_litebox);

необходимо сгенерировать отдельные идентификаторы для каждой из ссылок, используя этот способ, поэтому другой способ заключается в том, чтобы каждый из тегов <img> имел известный атрибут class, а затем выберите его с помощью $('.abc') (если класс abc)вместо $('#abc') и сделайте это за один шаг (т. е. как отдельный вызов после вашего $('a').each).

Answer 4

Причина в том, что open_litebox() объявлен внутри функции document.ready и поэтому недоступен из глобальной области.

Вы можете переместить функцию за пределы document.ready или изменить кодчтобы прикрепить обработчик onclick с помощью jQuery (который напрямую ссылается на функцию):

var link = $(' <img src="' + image_data + '" />' ).click(function () {
   open_litebox('hi');
});
$(this).after(link);

Answer 5

Существует гораздо более удобный и удобный способ назначить действие для щелчка мышью.

function init() {
    $('a').each(function() {
        if(valid_url.test($(this).attr('href'))){
            $(this).click( function() { open_litebox('hi'); });
        }
    });
}

Это решает проблему объема, как описано в других ответах. Если вам нужно вызвать open_litebox () с параметрами, оберните его внутри анонимной функции, как я, иначе функция будет вызвана, а затем возвращаемое значение передается действию click. Иначе, без параметров для передачи, назначение проще:

$(this).click( open_litebox );