Как я могу сделать так, чтобы javascript во внешнем файле работал только с изображением в div внутри файла PHP?

Question

Я довольно новичок в веб-разработке и учусь по ходу дела.

У меня есть файл PHP (index.php) с кодом, аналогичным приведенному ниже (div определены в styles.css):

<div class='imgBox' id='imgBox'>
    <form name='graphForm' id='graphForm' method='post' action='/'>
        <input type='image' id='clicked' src='" . WebPath. "/images/graph.png' class='clickableImage' />
        <input name='x_y' id='x_y' type='hidden'/>
        <input name='p_id' id='p_id' type='hidden' value='".$RecordID."'/>          
    </form>
</div>

У меня есть внешний файл js (showCoords.js) со следующим кодом:

var tooltip = $( '<div id="tooltip">' ).appendTo( 'body' )[0];

$( 'clickableImage' ).
    each(function () {
        var pos = $( this ).position(),
            top = pos.top,
            left = pos.left,
            width = $( this ).width(),
            height = $( this ).height();

        $( this ).
            mousemove(function ( e ) {
                var x = some_code_here,
                    y = some_code_here;

                $( tooltip ).text( x + ', ' + y ).css({
                    left: some_code_here,
                    top: some_code_here
                }).show();
            }).
            mouseleave(function () {
                //somestuff;
            }); 
    });

В настоящее время у меня есть такой файл, который я поместил в файл showCoords.jsв заголовочном файле (header.html):

<script type='text/javascript' src="http://blahblah.org/files/showCoords.js"></script>

Насколько я понимаю, я чувствовал, что этот конкретный js должен быть загружен после загрузки самой веб-страницы, а затем автоматически запустится на изображении в этомдела.Это неправильно?

Когда я загружаю страницу, ничего не происходит, поэтому я был бы признателен за любую помощь.

РЕДАКТИРОВАТЬ: В Firebug я получаю ошибку "ReferenceError: showCoords is notfined",Значит ли это, что showCoords.js даже не включается в первую очередь?

Answer 1

Вам нужно подождать, пока документ будет готов, прежде чем запускать весь этот код, мы называем его готовым или готовым документом в javascript.

Чтобы сделать это в jQuery, используйте следующее:

$(function() {
   // insert all your code here
});

Вы также пытаетесь выбрать элемент с названием clickable image.Вы, вероятно, хотите найти класс, как упомянул @oxo.

$('.clickableimage') would select <img class="clickabelimage" src="..." />

Answer 2

Если вы используете jQuery, вы используете неправильный способ выбора.

$( '<div id="tooltip">' ) должно быть $('#tooltip')

$( 'clickableImage' ) должно быть $('.clickableImage')

Answer 3

Ваш селектор jQuery неправильный. Попробуйте использовать $( '.clickableImage' ) и начните отладку оттуда.