【求助】关于【jquery】对动态生成的select的change事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了【求助】关于【jquery】对动态生成的select的change事件相关的知识，希望对你有一定的参考价值。
函数用在google map 标记的信息窗生成
对于这种动态生成的select,jquery写的触发事件不知道如何才能生效
以下是这个函数的代码，希望大家多多指导，谢谢各位了！
function attachUserMessage(marker, number)
google.maps.event.addListener(marker, "click", function ()
//用message存一个select
var message = "<html><table><tr><td><select id=\"user_select\" class=\"inputbox\" size = \"10\">";
message = message + "<option value=''>\u8be5\u57fa\u7ad9\u7528\u6237</option>";
var users = new Array();
m = "";
var i = 0;
var infowindow;
//从baseUser.jsp中获取数据
var datatosend = "lat=" + marker.getPosition().lat().toString() + "&lng=" + marker.getPosition().lng().toString() + "&OorD=" + OorD.toString();
$.ajax(type:"GET", url:"baseUser.jsp", data:datatosend, dataType:"xml", success:function (data, textStatus)
$("USER_LOC", data).each(function ()
//Attributes for each marker.
var user = $(this).attr("userId").toString();
//Create the user.
users.push(user);
m = m + "<option value=" + users[i] + ">" + users[i] + "</option>";
i = i + 1;
);
//获取数据后将其添加到message存的select的选项中
message = message + m;
message = message + "</select></td></tr></table></html>";
//生成google map里的infowindow
infowindow = new google.maps.InfoWindow(content:message);
//添加上述select的change事件。这么写是无效的！！望大虾指教
$("#user_select").change(function ()
alert("getit");
);
//打开infowindow
infowindow.open(map, marker);
, error:function (XMLHTTPRequest, textStatus, errorThrow)
alert("There was an error finding the users.");
);
);
alert("getit");
); 参考技术B 试试
var message = "<html><table><tr><td><select id=\"user_select\" class=\"inputbox\" size = \"10\" onChange=\"changeFunction\">";
然后再写一个function changeFuction()alert('getit');
关于动态生成dom绑定事件失效的原因
之前做项目都是直接用jquery的bind绑定事件，不过当时都不是动态生成dom元素，而是已经页面中原本存在的dom元素进行事件绑定，最近在测试给动态生成的dom绑定事件的时候发现事件失效，于是就测试了一下：
1.事件失效的原因：（1）bind事件绑定只对dom中存在的元素有效，对于我们后来动态增加的元素是监测不到，所以绑定不了
（2）同样，当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取不到的，因为网页只会执行一 次初始化绑定，之后动态生成的dom元素也是监测不到的。
2.解决办法：（1）在每一个动态生成的地方都再绑定多一次事件，比如这个博客里面的例子：http://blog.csdn.net/liuyan19891230/article/details/50402686
（2）把bind改用live，因为live是实时监测的，对于新增的dom元素也是有效的（因为不断去绑定、判断，所以可能会影响Web性能问题）
（3）把bind改用delegate，因为delegate是实时监测的。
（4）在jquery1.7 起版本用on替代了bind()、live() 和 delegate() 方法。
3.关于最近遇到的事件失效的原因：在原本的网页中（代码可见https://github.com/UFOwl/ife/tree/master/stage02/task16），我想要获取table里面动态生成的删除按钮，帮删除按钮绑定删除时间，可是删除事件失效，因为删除按钮是动态生成的，初始化事件绑定的时候，获取到的table里面的button已经是空的，所以绑定的一直都是空元素，所以点击button按钮的时候一直没有反应。
4.最后的解决办法：先获取table，然后再绑定table的click事件（因为table是在原本已经存在的dom元素），然后当点击事件触发的时候再捕获事件的target（比如点击table里面的button，这个时候因为已经动态生成button并append进去table里面了，所以button是存在的，此时target指的是button），然后再进行相应的操作。
注意：在这里注意两个问题：（1）table里面的元素是已经添加进入table里面了的，所以点击那个button的时候，e.target获取到的就是button
（2）为什么已经将button这些元素添加进入table里面，可是还是没能获取到呢，因为是init()这个函数初始化的时候获取table里面的button，可是此时还未进行任何操作，所以获取到的就是空，所以没绑定任何元素。
上面需要注意的两个问题要分清楚，这个是问题的关键。
5.关于bind：每次绑定事件之后事件会一直绑定着，除非用unbind解绑之后再重新绑定，要不然事件会一直存在，所以这就是为什么在做项目的时候，有时候ajax请求的结果会出现1,2,4,8这样叠加，是因为如果用了bind，每次触发事件都会绑定一次操作，所以触发第一次的时候，ajax请求一次；第二次的时候，ajax请求1+1=2次；第三次就是1+2+1=4次；第四次就是1+2+4+1=8次，以此类推。所以如果利用bind绑定事件的话，要先unbind解绑元素原本有的事件再绑定事件，才不会导致ajax请求多次。
以上是关于【求助】关于【jquery】对动态生成的select的change事件的主要内容，如果未能解决你的问题，请参考以下文章