javascript - 放入 Javascript 变量时 HTML 表单不起作用

Question

我正在这样做:

(function (){
	var ad = document.getElementById("layerad");

    var slide1 = "<form action='' method='get'><p>Toppings</p><p><input name='topping1' type='checkbox' value='c'> Cheese</p><p><input name='topping2' type='checkbox' value='o'> Onions</p><input type='submit' value='Submit'></form>";

	var container = document.getElementById("container");

	container.onclick = function(){
		this.innerHTML = slide1;
	}

	function closeAd(){
		ad.style.display = "none";
	}
	var closeButton = document.getElementById("close");
	closeButton.onclick = closeAd;

	var style = document.createElement("link");
	style.rel = "stylesheet";
	style.href = "style.css";

	parent.document.body.appendChild(layerad);
	parent.document.getElementsByTagName("head")[0].appendChild(style);
})();

<div id="layerad">
    <p id="close">Close[X]</p>
    <div id="container">
      <div id="slide1">
      	<img src="slide1.png">
      </div>	    	     
    </div>
</div>

我需要将表单放入 vars 中，因为最终该表单将来自 JSON 源，但这不是问题，这里的问题是当加载时，我根本无法与表单交互......

有什么想法吗？该产品是一个显示表单的插页式广告。

非常感谢!

Answer 1

在container.onclick内添加this.onclick = null;。这将防止每次单击表单时都将其替换。

(function (){
	var ad = document.getElementById("layerad");

    var slide1 = "<form action='' method='get'><p>Toppings</p><p><input name='topping1' type='checkbox' value='c'> Cheese</p><p><input name='topping2' type='checkbox' value='o'> Onions</p><input type='submit' value='Submit'></form>";

	var container = document.getElementById("container");

	container.onclick = function(){
            this.innerHTML = slide1;
            this.onclick = null;
	}

	function closeAd(){
		ad.style.display = "none";
	}
	var closeButton = document.getElementById("close");
	closeButton.onclick = closeAd;

	var style = document.createElement("link");
	style.rel = "stylesheet";
	style.href = "style.css";

	parent.document.body.appendChild(layerad);
	parent.document.getElementsByTagName("head")[0].appendChild(style);
})();

<div id="layerad">
    <p id="close">Close[X]</p>
    <div id="container">
      <div id="slide1">
      	<img src="slide1.png">
      </div>	    	     
    </div>
</div>