获取动态创建的 DIV 在 FireFox 中不起作用的 ID
我已经尽一切努力找到这个答案,现在是凌晨 1:00,我必须去睡觉并放弃:(在我的妻子为我第二次离婚之前!:)
简而言之,我的问题是,我使用 google API(本地搜索、图像搜索和网络搜索)来查找我纳入网站的各种字符串。它们被加载到动态 DIV 中,并且每组结果都被赋予一个带有与其编号相关的整数的 div。例如,
for (var i = 0; i < localSearch.results.length; i++) {
// Create HTML elements for search results
var letsseetitle = localSearch.results[i].titleNoFormatting;
letsseestreet = localSearch.results[i].streetAddress;
var letsseecity = localSearch.results[i].city;
var letsseeregion = localSearch.results[i].region;
var letsseecountr = localSearch.results[i].country;
var letsseestaticmapurl = localSearch.results[i].staticMapUrl;
var latresult = localSearch.results[i].lat;
var lng = localSearch.results[i].lng;
dv = document.createElement('div'); // create dynamically div tag
var attrname = "selectionbox" + i;
dv.setAttribute('id',attrname); //give id to it
var goFetchThis = letsseetitle + " " + letsseestreet + " " + letsseeregion + " " + letsseecountr;
dv.style.border="solid";
dv.style.padding="10px";
dv.style.backgroundColor="#80C4FF";
dv.title="Click to review this company.";
dv.innerHTML= letsseetitle + "<BR>" + letsseestreet + "<BR>" + letsseecity + "<BR>" + letsseeregion + "<BR>" + letsseecountr + "<BR>";
//var el = document.getElementById(attrname);
LoopIn = i;
// attach event onmouseclick to the created div tag
if(isIE){
dv.onclick = new Function("SelectThis(attrname, attrname)");
}
else{
dv.setAttribute("onclick", "SelectThis()");
}
document.getElementById("foundresultsdiv").appendChild( dv );
}
现在的问题是这样的。在 chrome(即 safari)和其他浏览器中,我对点击组件没有任何问题。 IE 中,当用户单击动态创建的 div 之一时,我的脚本会剥离内容并将其加载到准备好用户提交的表单中。
执行此操作的脚本如下:
function SelectThis(e) {
var targ;
if (!e) var e = window.event;
if (!e) var e = elTags[e].getAttribute("name");
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
theId=targ.id
var TheStuffInside = document.getElementById(theId).innerHTML;
var linebyline = TheStuffInside.split("<br>");
var searchname = document.getElementById('searchname')
searchname.value = linebyline[0];
var stAddress = document.getElementById('stadd')
stAddress.value = linebyline[1];
var suburb = document.getElementById('suburb')
suburb.value = linebyline[2];
var stateLocal = document.getElementById('statelocal')
stateLocal.value = linebyline[3];
var country = document.getElementById('country')
country.value = linebyline[4];
}
现在我不能在这里吹牛,因为这个脚本根本不是我写的,而且总的来说它运行得很好。除了在火狐浏览器中。当我点击 Firefox 中的动态 div 之一时,什么也没有发生。事实上,该元素返回未定义的结果。我已经尝试了很多变化,从更改代码到在加载时添加事件侦听器,但我一点运气都没有。
任何建议在这里将不胜感激。谁知道呢 - 你甚至可以挽救我的婚姻!:)
顺便说一下,//beat safari bug 在技术上是不正确的,但我没写好! :)
有任何问题请告诉我。
I've tried everything to find this answer and it's now 1:00 in the morning and I have to go to bed and give up :( before my wife serves me with our second divorce ! :)
My problem in short is this, I use google API's to (localsearch,imagesearch and websearch) to locate various strings that I incorporate into my site. They are loaded into a dynamic DIV and each set of results are given a div with an integer relating to it's number. For example,
for (var i = 0; i < localSearch.results.length; i++) {
// Create HTML elements for search results
var letsseetitle = localSearch.results[i].titleNoFormatting;
letsseestreet = localSearch.results[i].streetAddress;
var letsseecity = localSearch.results[i].city;
var letsseeregion = localSearch.results[i].region;
var letsseecountr = localSearch.results[i].country;
var letsseestaticmapurl = localSearch.results[i].staticMapUrl;
var latresult = localSearch.results[i].lat;
var lng = localSearch.results[i].lng;
dv = document.createElement('div'); // create dynamically div tag
var attrname = "selectionbox" + i;
dv.setAttribute('id',attrname); //give id to it
var goFetchThis = letsseetitle + " " + letsseestreet + " " + letsseeregion + " " + letsseecountr;
dv.style.border="solid";
dv.style.padding="10px";
dv.style.backgroundColor="#80C4FF";
dv.title="Click to review this company.";
dv.innerHTML= letsseetitle + "<BR>" + letsseestreet + "<BR>" + letsseecity + "<BR>" + letsseeregion + "<BR>" + letsseecountr + "<BR>";
//var el = document.getElementById(attrname);
LoopIn = i;
// attach event onmouseclick to the created div tag
if(isIE){
dv.onclick = new Function("SelectThis(attrname, attrname)");
}
else{
dv.setAttribute("onclick", "SelectThis()");
}
document.getElementById("foundresultsdiv").appendChild( dv );
}
Now the problem is this. In both chrome, ie, safari and others I have no problem with the on-click component. IE, when the user clicks on one of the dynamically created divs, my script strips the content and loads them up into the form ready for the user to submit.
The script that does this follows;
function SelectThis(e) {
var targ;
if (!e) var e = window.event;
if (!e) var e = elTags[e].getAttribute("name");
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
theId=targ.id
var TheStuffInside = document.getElementById(theId).innerHTML;
var linebyline = TheStuffInside.split("<br>");
var searchname = document.getElementById('searchname')
searchname.value = linebyline[0];
var stAddress = document.getElementById('stadd')
stAddress.value = linebyline[1];
var suburb = document.getElementById('suburb')
suburb.value = linebyline[2];
var stateLocal = document.getElementById('statelocal')
stateLocal.value = linebyline[3];
var country = document.getElementById('country')
country.value = linebyline[4];
}
Now I can't brag here because I didn't write this script at all, and in the main it works well. EXCEPT in firefox. When I click on one of the dynamic divs in firefox NOTHING happens at all. In fact, the element returns an undefined result. I've tried heaps of variations from changing the code to adding event listeners on the on-load and I've had NO LUCK at all.
Any advice here would be greatly appreciated. Who knows - you may even save my marriage !:)
By the way, the // beat safari bug is technically incorrect but I didn't write it ok ! :)
Any questions please let me know.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
使用 JSLint 检查代码。有很多错误。
Check you code with JSLint. There are a lot of errors.
问题可能是页面加载时 DOM 中不存在您尝试访问的 DIV。 JQuery live 已经解决了这个问题。所以我会从那里开始。
The problem may be that the DIV you are trying to access does not exist in the DOM on page load. JQuery live has solved this problem. So I would start there.