Question

我创建了一个页面，在5秒钟不活动后，通过innerHTML函数触发外部HTML视频循环页面。

当用户通过mousemove或mousedown恢复活动时，我正在使用innerHTML替换视频页面以输出回主页。

不活动和重新加载页面工作后的视频循环绝对正常。

这是一个有效的https://jsfiddle.net/ssoney200/fs68tqzk/1/

我遇到的问题是onclick函数不再在动态输出innerHTML中工作。

我正在尝试使用以下代码

var timeoutID;

function setup() {
   this.addEventListener("mousemove", resetTimer, false);
   this.addEventListener("mousedown", resetTimer, false);
   this.addEventListener("keypress", resetTimer, false);
   this.addEventListener("DOMMouseScroll", resetTimer, false);
   this.addEventListener("mousewheel", resetTimer, false);
   this.addEventListener("touchmove", resetTimer, false);
   this.addEventListener("MSPointerMove", resetTimer, false);

   startTimer();
}

setup();

function startTimer() {
   // wait 5 seconds before calling goInactive
   timeoutID = window.setTimeout(goInactive, 5000);
}

function resetTimer(e) {
   window.clearTimeout(timeoutID);
   goActive();
}

function goInactive() {
    document.getElementById("content").innerHTML="<object type='text/html' data='http://bubbleweb.eu/sp-interactive/video.html' ></object>";

}

function goActive() { 

    document.getElementById("content").innerHTML='<div id="home" style="text-align:center; display:block"><img class="logo" src="http://bubbleweb.eu/sp-interactive/images/logo.jpg" /><a class="button" href=""><img src="http://bubbleweb.eu/sp-interactive/images/one-spie.jpg" /></a><a onclick="smart_fm_btn()" class="button" href="#"><img src="http://bubbleweb.eu/sp-interactive/images/smart-fm.jpg" /></a><a class="button" href=""><img src="http://bubbleweb.eu/sp-interactive/images/who-we-are.jpg" /></a></div><div onclick="smart_fm_btn()" style="text-align:center; display:none"><img class="nav" src="http://bubbleweb.eu/sp-interactive/images/nav.jpg" /><img class="logo-inner" src="http://bubbleweb.eu/sp-interactive/images/logo.jpg" /><div class="left"><a id="enegyModal" href="#"><img class="nav" src="http://bubbleweb.eu/sp-interactive/images/energy.jpg" /></a></div><div class="right"><img class="nav" src="http://bubbleweb.eu/sp-interactive/images/predictive.jpg" /></div><div id="myModal" class="modal"><!-- Modal content --><div class="modal-content"><span class="close">&times;</span><p>Test the Modal..</p></div>'

   startTimer();
}

////////// Smart button working, but not dynamically in innerHTML //////////
function smart_fm_btn() {
  var x = document.getElementById("smartfm");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }

  var y = document.getElementById("home");
  if (y.style.display === "block") {
    y.style.display = "none";
  } else {
    y.style.display = "block";
  }

}

body {
  font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background: #42413C;
  margin: 0;
  padding: 0;
  color: #000;
}
.container {
  width: 1080px;
  height:1960px;
  background: #FFF;
  margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
.content {
  padding: 0px 0;
}

<div class="container">
     <div id="content" class="content">     
     </div>
 </div>

点击'smart-fm-btn'来交换'home'和'smartfm'div的显示样式。如果我自然地在页面中编码它，但是当通过innerHTML动态输出时失败，这可以正常工作。

如果有人可以请一些意见来分享我在这里可能做错的事情，我将永远感激不尽。我一直试图让这个工作过去2天！：/

onclick函数在innerHTML中不起作用

0 个答案: