javascript - 动态创建 标签的功能不起作用

Question

我正在使用 html、js 和 css 开发一个移动网站。我通过 HTML5 DOM 创建了标签并为其分配了功能。它不工作。

我的 html 代码（我已经尝试过 DOM 方法）；

    <script>
            var addExhibits = document.getElementById('mycontent');
            function mytest()
            {
    var div = document.createElement('div');
    div.id = 'rateMe';
    var anchor = document.createElement('a');
    anchor.id="_1";
    anchor.onclick = rateIt(this);
    anchor.onmouseover=rating(this);
    anchor.onmouseout=off(this);
            div.appendChild(anchor);
            addExhibits.appendChild(div);
            }
   </script>
   <body><div id='mycontent' title="Rate Me..."></body>

代码（静态创建的标签 - 工作正常）

<div id="rateMe" title="Rate Me...">
<a onclick="rateIt(this)" id="_1" onmouseover="rating(this)" onmouseout="off(this)"></a>
</div>

rate(this) 是外部 JS 中的一个函数（http://reignwaterdesigns.com/ad/tidbits/rateme/）

score 1 · Accepted Answer

您不会在任何地方调用 mytest() 函数。这是我看到的第一件事。另一件事是您将脚本放在 div (mycontent) 之上，因此在读取脚本时尚未创建 div。但我不完全理解你的目标是什么，或者你的问题到底是什么。

score 1 · Accepted Answer

您的事件处理程序只需在此处分配相应函数调用的结果：

anchor.onclick = rateIt(this);
anchor.onmouseover=rating(this);
anchor.onmouseout=off(this);

我假设您希望它们在发生事件时执行：

var that = this;
anchor.onclick = function(){ rateIt(that); };
anchor.onmouseover = function(){ rating(that); };
anchor.onmouseout= function(){ off(that); };

score 0 · Accepted Answer

你不需要通过这个。

您可以通过多种方式访问函数内部的元素。

var addExhibits=document.getElementById('mycontent'),
rateIt=function(e){
 e=e||window.event;
 var target=e.target||e.srcElement;//polyfill for older browser
 console.log(this,target);
},
rating=function(e){
 console.log(this,e.target);
},
off=function(e){
 console.log(this,e.target);
},
mytest=function(){
 var div=document.createElement('div'),
 a=document.createElement('a');
 div.id='rateMe';
 a.id="_1"; // id's shouldn't contain _ - & numbers(1st letter) even if it works.
 a.onclick=rateIt;
 a.onmouseover=rating;
 a.onmouseout=off;
 div.appendChild(a);
 addExhibits.appendChild(div);
};

这样你也不会造成内存泄漏。

ps.：您使用的外部js示例写得很糟糕。

为了使您的示例正常工作，您需要使用正确的变量（this/e.target/e.srcElement）更改外部 js 中奇怪的 me/num/sel 变量。

javascript - 动态创建标签的功能不起作用

3 回答 3

Related

Reference