jQuery绑定click事件不触发、onclick点击监听失效问题求助

问题根因 #

你执行$("#yenile").click()绑定事件的时机是页面初始加载阶段，此时id为yenile的按钮还不存在于DOM树中——该元素是kodOlustur函数内的$.post异步请求返回后，才通过html()方法动态插入到页面的，初始绑定逻辑找不到对应元素，自然无法触发回调。

解决方法 #

方案1：事件绑定后置到元素插入完成后 #

将点击事件绑定逻辑放在动态插入HTML代码的后面，放到$.post的回调函数内执行：

function kodOlustur() {
  $.post("func/islem.php", {
    islem: "kodolustur"
  }, function(sonuc) {
    $("#sonuc").html(sonuc);
    $("#full").html('<div class="card"><div class="card-body" style="background-color: #4CAF50;"><div class="sanloginpanel"><img class="container-fluid" style="height:128px; width:125px;" src="https://www.shareicon.net/data/512x512/2016/07/24/801257_sms_512x512.png"><br><p style="padding-top:20px;">İşleminizi güvenli bir şekilde tamamlamak için lütfen cep telefonunuza iletilen 4 haneli kodu giriniz</p><br><button id="yenile">Yenile</button><div class="tablerow"><input type="text" id="smscode" placeholder="* * * * *" class="login-input" required></div><br><div class="tableheader"><button style="background-color: #eb6027 !important; border-color:#eb6027 !important;" id="smsverify" class="btn btn-custom">Rezervasyonu Tamamla</button></div></div></div></div>');
    // 元素插入完成后再绑定事件
    $("#yenile").click(function() {
      alert("aa");
    });
  });
}

方案2：使用事件委托（更推荐） #

把事件绑定到页面初始就存在的父级容器上（比如你代码里的#full容器，或者直接用document），通过事件冒泡机制匹配触发事件的子元素，不管后续什么时候插入动态元素都能正常触发回调：

// 该逻辑可以放在页面任意位置，不需要等异步请求完成
$("#full").on("click", "#yenile", function() {
  alert("aa");
});

如果后续你要给同是动态插入的#smsverify按钮绑定点击事件，也可以用同样的事件委托写法实现。

内容的提问来源于stack exchange，提问作者leatred