javascript动态生成元素并绑定事件

在写页面前端的时候经常会遇到这样的需求，根据搜索结果显示多行数据，并点击数据执行某些操作。那么在不用框架的情况下如何去完成该操作呢？

其实很简单，只需要在循环中动态创建元素，创建时加动作函数即可：

<div id="add-div">
				</div>

for(var i=0;i<data.msg.length;i++){
    var add_subbranch = document.createElement("div");
    add_subbranch.innerHTML = "<div id='"+ i +"' 'choose(this)'><p class='addline'>"+ data.msg[i].subbranch + "</p></div>";
    add_div.appendChild(add_subbranch);
					}

这样每行id是该行的顺序，显示的值是各行对应的值，每次this传的是add_subbranch这个函数，在同一js文件下，写choose函数：

function choose(e) {
	var id = e.id;
	console.log(id);
}

e.id就是之前赋给每个动态生成的元素的id，在循环前将data保存起来，就能通过id得到每行对应的值。

var list = [];

list = data.msg;

function choose(e) {
	var id = e.id;
	plus.storage.setItem('subbranch',list[id].subbranch );  
	plus.storage.setItem('bank',list[id].bank );
	plus.storage.setItem('province',list[id].province );
	plus.storage.setItem('city',list[id].city );
}

如此，每次点击完之后都能获取到对应行的值。

如果我希望点击后返回到上一个页面并传值刷新呢？

那么需要写一个页面监听器，并用fire触发

function choose(e) {
	var id = e.id;
	plus.storage.setItem('subbranch',list[id].subbranch );  
	plus.storage.setItem('bank',list[id].bank );
	plus.storage.setItem('province',list[id].province );
	plus.storage.setItem('city',list[id].city );
	var web = plus.webview.getWebviewById('corp-cert2');
	mui.fire(web,'refresh',{});
	plus.webview.currentWebview().close();
}

另一个页面：

<input id='account-bank' value=''/>

window.addEventListener("refresh",function(){
				var subbranch=plus.storage.getItem('subbranch');
				var account_bank=document.getElementById("account-bank");
				account_bank.value = subbranch;
			},false);

这样每次点击完之后值保存在plus.storage中，然后触发监听传值刷新，然后返回到刷新值的页面。

然后会发现每次查找后增加的元素一直保留没有消除，但是需求是每次搜索只出现当前搜索的结果该怎么办呢？

那么就在循环生成元素前先生成一个div，然后每次查询前删掉div就可以顺带删除上次查询的数据了。

<div id="add-bank">
	<div id="add-div">
	</div>
</div>

var add_div = document.getElementById("add-div");
add_bank.removeChild(add_div);

var add_div = document.createElement("div");
add_div.setAttribute('id','add-div');
//中间动态生成add_subbranch，并add_div.appendChild(add_subbranch);
add_bank.appendChild(add_div);

在尝试生成动态元素的时候，一开始并没有用innerHTML，而是用createElement生成input，然后用setAttribute设置属性，再对每个元素设置事件监听，发现并不能实现该功能，原因是事件监听的回调函数是在循环执行后才执行的，并不是对应每一个元素来执行，因此回调函数中的值永远是循环中的最后一个。用innerHTML内部赋给id和绑定onclick可以解决该问题，且onclick执行的choose函数需要写在循环外部来调用。
而且input会有加disable属性无法绑定onclick事件，不加会有输入问题的情况，改成div再改css即可。