jQuery, вставка кликабельного изображения - PullRequest
Новая
       2

jQuery, вставка кликабельного изображения

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

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

Я очень близок к тому, чтобы добраться туда, но я обнаружил странную проблему в IE всех мест, смеется.

Используя jQuery, 

$('#sas-window-header').append("<img src='sandwich.jpg' id='gif' alt='Sandwich' />");

Это выдает ошибку в IE7,8 

Object expected attachevent, line 42 character 20

(аттачевент - это имя моей страницы)

Я пытался написать свою функцию, используя vanilla js, но кажется, что между attachEvent() и addEventListener() слишком много проблем, чтобы сделать ее жизнеспособной, поэтому я использую jQuery, чтобы помочь мне.

Может кто-нибудь сказать мне, почему IE считает, что методы функции кросс-браузерных фреймворков должны ожидать объект?

Я получаю ожидаемое поведение в Firefox, Safari и Chrome. Два изображения в Opera почему-то и IE7,8 с этим объектом ошибки. Я приеду на ie6 позже! ;)

Вот что у меня есть, 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Attach event test page</title>

        <script type="text/javascript">
        window.onload = (function() {

            if(typeof jQuery == 'undefined'){
                var script = document.createElement("script");
                script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
                script.type = "text/javascript";
                script.onload = script.onreadystatechange = function(){
                    injectImg();
                };
                document.body.appendChild( script );
            }else{
                injectImg();
            }

        });

        function injectImg(){
           $('#sas-window-header').append("<img src='sandwich.jpg' id='gif' alt='Sandwich' />");

           $('#gif').click(function(){
               alert('Clicked');
           })
        }

        </script>
    </head>
    <body>
        <p>The header</p>
        <div id="sas-window-header"></div>
    </body>
</html>

Ответы [ 4 ]

1 голос
/ 13 июля 2010

Вы добавляете новое изображение в каждый readystatechange и загрузку скрипта. Различия в том, как запускаются эти события, вероятно, определяют количество вставляемых изображений. Вы, вероятно, хотите сделать $('#sas-window-header').empty() до добавления ...

Нужно ли вводить jQuery? Вы не можете включить это? Вышеупомянутое выглядит действительно грязно, и может быть сжато до 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Attach event test page</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
           $('#sas-window-header').append("<img src='sandwich.jpg' id='gif' alt='Sandwich' />");

           $('#gif').click(function(){
               alert('Clicked');
           });
        });
        </script>
    </head>
    <body>
        <p>The header</p>
        <div id="sas-window-header"></div>
    </body>
</html>
0 голосов
/ 13 июля 2010

Вы позвонили injectImg() до вставки тега скрипта, это означает, что jQuery libary еще не загружен.
И, в функции injectImg(), используется селектор jquery.
Вот почему произошла ошибка.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Attach event test page</title>

        <script type="text/javascript">
        window.onload = (function() {

            if(typeof jQuery == 'undefined'){
                var script = document.createElement("script");
                script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
                script.type = "text/javascript";
                script.onload = script.onreadystatechange = function(){
                document.body.appendChild( script );                    
                 injectImg();
                };

            }else{
                injectImg();
            }

        });

        function injectImg(){
           $('#sas-window-header').append("<img src='sandwich.jpg' id='gif' alt='Sandwich' />");


        }

        </script>
    </head>
    <body>
        <p>The header</p>
        <div id="sas-window-header"></div>
    </body>
</html>

Edit: Да ты прав. Если это так, вы можете вызвать injectImg () с помощью setTimeout, хотя это НЕ может быть достойным решением. 

 window.onload = (function() {

            if(typeof jQuery == 'undefined'){
                var script = document.createElement("script");  
                script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
                script.type = "text/javascript";

                script.onload = script.onreadystatechange = function(){
                    setTimeout('injectImg()',1000);
                };
                document.body.appendChild( script );
            }else{
                injectImg();
            }

        });
0 голосов
/ 13 июля 2010

Эй, после добавления точки с запятой в функцию injectImg в конце события щелчка изображения, оно работает. 

function injectImg(){
   $('#sas-window-header').append("<img src='sandwich.jpg' id='gif' alt='Sandwich' />");

   $('#gif').click(function(){
       alert('Clicked');
   });

  }

Оформить заказ здесь: http://jsbin.com/aduyu3/edit (протестировано в IE 7)

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

На вашем месте я бы создал изображение как элемент dom: 

var theImage = document.createElement("img");

И соответственно установил бы свойства: 

theImg.src = 'sandwich.gif';
theImg.alt = 'Sandwich';
theImg.id  = 'gif';

Установите обработчик: 

$(theImg).click(function(){
    alert('Clicked');
});

Затем поместите объект где-нибудь в дерево дерева: 

$('#sas-window-header').append(theImg);

Это должно сработать ... Дайте нам знать.

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

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

...