Javascript 无法在动态插入的内容中单击

我有一个动态插入谷歌地图的表单。但是，我无法单击任何输入。我相信我需要在某处添加一个侦听器，但我不确定

函数googlemap（）{
//谷歌地图坐标
var posY=37.765700，
posX=-122.449134，
location=新的google.maps.LatLng（posY，posX），
//偏移位置
posY=posY+0.055；
offsetlocation=新的google.maps.LatLng（posY，posX）；
变量映射选项={
泛控制：错误，
动物控制：错误，
mapTypeControl:false，
scaleControl:false，
街景控制：错误，
overviewMapControl:错误，
真的，
禁用双击缩放：false，
滚轮：错误，
缩放：12，
中心：偏移定位，
//路线图；卫星；混合；地形；
mapTypeId:google.maps.mapTypeId.ROADMAP
};
overlay.prototype=new google.maps.OverlayView（）；
//创建覆盖标记
overlay.prototype.onAdd=函数（）{
blip=document.createElement（'div'），
pulse=document.createElement（'div'）；
blip.className='blip'；
pulse.className='pulse'；
//创建一个对话框并从#mapcontents中获取内容
boxText=document.createElement（“div”）；
boxText.className=“对话框”；
mapContents=$（'#mapContents'）.html（）；
boxText.innerHTML=mapContents；
$（'#mapcontents'）。删除（）；
blip.appendChild（boxText）；
//附加“blip”标记
this.getPanes（）.OverlyLayer.appendChild（blip）.appendChild（pulse）；
}
//缩放时更新光点定位
overlay.prototype.draw=函数（）{
var overlyprojection=this.getProjection（），
边界=新的google.maps.LatLngBounds（位置，位置），
sw=OverlyProjection.fromLatLngToDivPixel（bounds.getSouthWest（）），
ne=overlayProjection.fromLatLngToDivPixel（bounds.getNorthEast（））；
blip.style.left=sw.x+'px'；
blip.style.top=ne.y+'px'；
//通过调整标题大小将导航移到视图中
var w=$（'.dialog'）.width（），
w=（w/2）+25，
w='-'+w+'px'；
h=$（'.dialog'）.height（），
h=（h）+100，
h='-'+h+'px'；
$（'.dialog'）.css({
“页边距顶部”：h，
“左边距”：w
});
};
var map=new google.maps.map（document.getElementsByClassName（'map'）[0]，mapOptions）；
//在此覆盖上显式调用setMap
功能叠加（地图）{
这个.setMap（map）；
}
//窗口调整大小时的中心贴图
google.maps.event.addDomListener（窗口'resize'，函数（）{map.setCenter（location）}）；
//缩放时的中心地图
google.maps.event.addListener（map'zoom_changed'，function（）{map.setCenter（location）}）；
//我知道我在做什么，但我认为这个点击监听器是解决方案的一部分。
google.maps.event.addListener（'.dialog'，'click'，function（）{
警报（“正常”）；
});
//过程联系表
google.maps.event.addListener（映射'domready'，函数（）{
$（“按钮”）。单击（函数（e）{
（e） .preventDefault（）；
警报（“正常”）；
返回false；
变量名称=$（“.contactform输入[name='name']”），
电子邮件=$（“.contactform输入[name='email']”），
message=$（“.contactform textarea[name='message']），
错误=错误；
//清除验证错误
$（“#联系人输入，#联系人文本区域”）.removeClass（'error'）；
if（name.val（）.length<1）
name.addClass（“错误”）；
如果（！/^[a-zA-Z0-9.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,4}（\.[a-zA-Z]{2,3}）（\.[a-zA-Z]{2,3}）$/.测试（email.val（））
email.addClass（“错误”）；
if（message.val（）.length<1）
message.addClass（“错误”）；
//如果存在错误类
if（$（“.error”）.length）返回false；
$（this.attr（'disabled'，true.）.prepend（“”）；
$.ajax({
类型：“post”，
数据类型：“json”，
url:“lib/sendmail.php”，
数据：$（“#contactform”）.serialize（）
})
.始终（功能（数据）{
$（'h5'）.animate（{opacity:0}，function（）{
$（'h5'）.text（“已发送电子邮件！！”）
.animate（{opacity:1}）；
});
$（'.contactform'）。动画（{opacity:0}，function（）{
$（'.contactform'）.html（“
感谢您提交表单。我们将尽快回复。
”）
.animate（{opacity:1}）；
})
});
});
返回false；
});
//添加覆盖层
覆盖=新覆盖（地图）；
}

---

知道我为什么不能单击输入吗？

您的事件必须添加到

onAdd

函数中

当前，事件处理程序是在元素之前创建的。所以它没有捕捉到对这个特定元素的点击

或者，您也可以为覆盖的绑定创建一个新函数，只是为了获得干净的代码：

overlay.prototype.onAdd = function() {

    [...]

    this.bindings();
}

overlay.prototype.bindings = function(){
   $("button").on("click",function(){
     alert("Click");
     return false;
   }
}

现在我还没有真正解决你的问题的办法。 可能通过将

mousedown

事件重新附加到它们，并强制它们

focus（）

：

您的复选框也是如此。

您使用的是

$（“按钮”）。单击在按钮出现在dom上之前触发的
.click（）
将处理程序绑定到dom上的所有当前元素

更好地使用
$（'button'）。在（'click'，function（）{}）上，它将单击事件处理程序绑定到页面上按钮的所有当前和未来实例。如果您在页面上动态添加内容，这尤其方便。通过ajax或其他方式

在这里阅读关于jQuery.on（）的更多信息
overlay.prototype.onAdd = function() {

    [...]

    this.bindings();
}

overlay.prototype.bindings = function(){
   $("button").on("click",function(){
     alert("Click");
     return false;
   }
}

$("input,textarea").on("mousedown",function(){$(this).focus();});

google.maps.event.addDomListener(blip, 'mousedown', function (e) {
    e.cancelBubble = true;
    if(e.stopPropogation) {
        e.stopPropagation();
    }
});

$('#mapcontents')
    .clone()
    .wrap('<div class="dialog" />')
    .wrap('<div class="blip />')
    .appendTo( *selector* );

google.maps.event.addListener(map, 'domready', function () {

google.maps.event.addListenerOnce(map, 'tilesloaded', function () {

$(map.getDiv()).on('click','button',function (e) {/*some code*/});