Функция, не вызывающая внутри события 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

Ваша функция 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 3

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

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

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

Answer 4

Там в гораздо аккуратнее и более JQuery способ назначения действие щелчка.

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

Answer 5

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

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

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

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