Question

在我的项目中，我想在点击复选框时执行某些操作。

这是我的代码可以正常工作：

<script>
window.onload=function() 
{
  var uTId = document.getElementById('uTId');       
  uTId.addEventListener("click", function(ev){
   if(ev.target.getAttribute("type") == "checkbox"){
   alert("xietest");
   }
 },false);
}
</script>

<div  class="easyui-panel" id="pp"  >
  <table class="uTb" id="uTId" cellspacing="0" style="100%" >
    <tr>
        <td ><input type="checkbox" id="Jack"/>Jack</td>
    </tr>
  </table>
</div>

单击复选框时，“xietest”可以在页面中成功显示;

但实际上pp easyui-panel的内容来自ajax，如：

<script>
...
  $.ajax({
 .......
 success:function(data){
   var drfV='<table class="uTb" id="uTId" cellspacing="0" style="100%" >';
     drfV=drfV+'<tr><td ><input type="checkbox" value="'+data.name+'"/>'+data.name+'</td>';
     drfV=drfV+'</tr></table>';
     $('#pp').html("");
     $('#pp').append(drfV);
   }
  });
....
window.onload=function() 
{
  var uTId = document.getElementById('uTId');       
  uTId.addEventListener("click", function(ev){
   if(ev.target.getAttribute("type") == "checkbox"){
   alert("xietest");
   }
 },false);
}
</script>

<div  class="easyui-panel" id="pp"></div>

现在它失败了，“xietest”无法像以前一样显示。

我知道不应该在DOM中找到表id uTId，因为它是在window onload之后加载的。

但我不知道如何将表id uTId绑定到DOM，谁可以帮助我？

Answer 1

正如您所说，您无法为卸载的dom元素声明事件。您应该处理所有成功事件并在之后定义事件。因此，您可以使用setInterval来应用它。

var ajax1Success = true;
var ajax2Success = true;
success: function(data) {
     var drfV = '<table class="uTb" id="uTId" cellspacing="0" style="100%" >';
     drfV = drfV + '<tr><td ><input type="checkbox" value="' + data.name + '"/>' + data.name + '</td>';
     drfV = drfV + '</tr></table>';
     $('#pp').html("");
     $('#pp').append(drfV);
     //Declare the event
     ajax1Success = true;
}
success: function(data) {
     var drfV = '<table class="uTb" id="uTId" cellspacing="0" style="100%" >';
     drfV = drfV + '<tr><td ><input type="checkbox" value="' + data.name + '"/>' + data.name + '</td>';
     drfV = drfV + '</tr></table>';
     $('#pp').html("");
     $('#pp').append(drfV);
     //Declare the event
     ajax2Success = true;
}
var t = window.setInterval(function () {
    var ajaxSuccess = ajax1Success || ajax2Success;
    if (ajaxSuccess == true) {
        clearInterval(t);//Clear the interval after at least one ajax call have been succeeded
        var uTId = document.getElementById('uTId');
        uTId.addEventListener("click", function (ev) {
            if (ev.target.getAttribute("type") == "checkbox") {
                alert("xietest");
            }
        });
    }

}, 1000);

如何在ajax成功函数中将表id绑定到DOM

1 个答案: