放入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>

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

有什么想法吗？该产品是插页广告，可显示表单。

非常感谢！

Answer 1

在this.onclick = null;内添加container.onclick。这样可以防止每次单击时更换表单。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您不应将表单放在#container内。将表单放在另一个div中，它会起作用。

(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(){
		document.getElementById('myForm').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 id="myForm">

</div>
</div>