Question

我正在尝试为客户端解决问题，他们希望动态地将图像注入页面并在单击时调用其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

（attachevent是我页面的名称）

我试图使用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>

Answer 1

您在每个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>

Answer 2

如果我是你，我会将图像创建为dom元素：

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

并相应地设置属性：

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

设置处理程序：

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

然后将对象放在dom树中的某个位置：

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

那应该有用......让我们知道。

Answer 3

嘿，在图片点击事件结束后在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中测试）

Answer 4

您在插入脚本标记之前调用了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>

编辑：是的，你是对的。如果是这样，你可以使用setTimeout调用injectImg（），虽然它可能不是一个合适的解决方案。

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

        });

jQuery，注入可点击的图像

4 个答案: