Javascript Jquery html无法处理动态添加的元素

我先做这个

var columns = row.getElementsByTagName('td');

columns[2].innerHTML ='<Button class="btn btn-success" style="margin-right:4px;" onclick="savecategory(this.parentNode,this)">Save</Button>

var columns=row.getElementsByTagName（'td'）；
列[2]。innerHTML='Save

现在我的功能

function savecategory(but,save_button){
$(save_button).html('<span class="spinner-border spinner-border-sm"></span> Save');
$(save_button).attr("disabled",true);
//These two lines do not work

}

功能保存类别（但是，保存按钮）{
$（保存按钮）.html（'save'）；
$（保存按钮）.attr（“已禁用”，true）；
//这两条线不行
}

savecategory中的行不起作用，但当我控制台时，它会显示正确的按钮

编辑此处是完整的功能：

function savecategory(but,save_button){
  var row = but.parentNode;
var columns = row.getElementsByTagName('td');
var newmain = $(columns[0]).children('select[name=maincategory]').val();

columns[1].innerHTML = (columns[1].innerHTML).replace(/ /g, '');
var newcat = $(columns[1]).text();
var oldmain = columns[0].getAttribute('data-init');
var oldcat = columns[1].getAttribute('data-init');

$(save_button).html('<span class="spinner-border spinner-border-sm"></span> Save');
$(save_button).attr("disabled",true);

var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
    var arr= JSON.parse(this.responseText);
if(arr[0] == 1){
columns[0].innerHTML = newmain;
columns[1].innerHTML = newcat;
columns[1].setAttribute("contenteditable","false");
columns[0].setAttribute('data-init',newmain);
columns[1].getAttribute('data-init',newcat);

columns[2].innerHTML ='<Button class="btn btn-primary" onclick="editcategory(this.parentNode)"><i class="zmdi zmdi-edit zmdi-hc-lg"></i></Button>';


$('select[name ="dishtype"] option[value="'+oldcat+'"]').remove();
$('select[name ="dishtype"]').append('<option value="' + newcat + '">' + newcat + '</option>');
var $alen = $('.scrollmenu').eq(0).children().length;


$('.scrollmenu').eq(0).find('a').each(function(){
  if($(this).attr('data-init').localeCompare(oldcat) == 0){
    $(this).attr('data-init',newcat); 
     $(this).html(newcat);
  }
  });

var area = document.getElementsByClassName(oldcat)[0];
$(area).find("p:first").html(newcat);

$(area).removeClass(oldcat).addClass(newcat);

alert("Category updated");

}
else{
  alert(arr[1]);
}
$(save_button).html('Save');
$(save_button).attr("disabled",false);


    }
else{
$(save_button).html('Save');
$(save_button).attr("disabled",false);
}

  }


  xmlhttp.open("GET","url.php?oldmain="+encodeURIComponent(oldmain)+"&oldcat="+encodeURIComponent(oldcat)+"&newmain="+encodeURIComponent(newmain)+"&newcat="+encodeURIComponent(newcat),true);

  xmlhttp.send();



}

功能保存类别（但是，保存按钮）{
var row=but.parentNode；
var columns=row.getElementsByTagName（'td'）；
var newmain=$（列[0]）.children（'select[name=maincegory]'）.val（）；
列[1]。innerHTML=（列[1]。innerHTML）。替换（//g'，）；
var newcat=$（列[1]）.text（）；
var oldmain=columns[0].getAttribute（'data-init'）；
var oldcat=columns[1].getAttribute（'data-init'）；
$（保存按钮）.html（'save'）；
$（保存按钮）.attr（“已禁用”，true）；
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var arr=JSON.parse（this.responseText）；
如果（arr[0]==1）{
列[0]。innerHTML=newmain；
列[1]。innerHTML=newcat；
列[1].setAttribute（“contenteditable”、“false”）；
列[0]。setAttribute（'data-init'，newmain）；
列[1]。getAttribute（'data-init'，newcat）；
列[2]。innerHTML=''；
$（'select[name=“dishtype”]option[value=“”+oldcat+“]”）。删除（）；
$（'select[name=“dishtype”]”）。追加（''+newcat+''）；
var$alen=$（'.scrollmenu'）.eq（0）.children（）.length；
$（'.scrollmenu'）.eq（0）.find（'a'）.each（函数（）{
if（$（this）.attr（'data-init'）.localeCompare（oldcat）==0）{
$（this.attr（'data-init'，newcat）；
$（this.html（newcat）；
}
});
var area=document.getElementsByClassName（oldcat）[0]；
$（area.find（“p:first”）.html（newcat）；
$（面积）.removeClass（oldcat）.addClass（newcat）；
警报（“类别更新”）；
}
否则{
警报（arr[1]）；
}
$（保存按钮）.html（'save'）；
$（保存按钮）.attr（“已禁用”，false）；
}
否则{
$（保存按钮）.html（'save'）；
$（保存按钮）.attr（“已禁用”，false）；
}
}
xmlhttp.open（“GET”、“url.php？oldmain=”+encodeURIComponent（oldmain）+“&oldcat=”+encodeURIComponent（oldcat）+“&newmain=”+encodeURIComponent（newmain）+“&newcat=”+encodeURIComponent（newcat），true）；
xmlhttp.send（）；
}

---

编辑代码是上面写的，请检查它是上面写的，我无法找到错误，这就是我正在做的，不管这种方法在哪里工作，我都不理解它

如果您在静态HTML中创建它，那么只需使用.ready（handler）或.on（“load”，handler）

如果使用jQuery的load（）函数，则在加载内容时可以运行回调：

$（'#element'）.load（'sompage.html'，function（）{/callback/}）

---

在回调函数中，您可以编写函数来调用函数。我希望这对您有用。谢谢您编辑完问题后，我们可以看到，

readystatechange

处理程序中的

else

块中的Save按钮在检测到响应未成功时被还原。但是，

readystatechange

会多次触发，每次触发事件时，您都会覆盖原始保存按钮的内容，并且不会设置微调器范围，并将其

disabled

属性设置为

false

，直到请求实际检测到成功响应为止

要解决此问题，请在XHR对象上侦听

load

事件，而不是

readystatechange

，它只触发一次。检查请求的状态，如果未成功（200），则

else

块将恢复保存按钮。您不需要重置成功处理程序中的按钮，因为在设置单元格的

innerHTML

时，该按钮将从DOM中删除。此文件的缩写代码：

function savecategory(but, save_button) {
  var row = but.parentNode,
    columns = row.getElementsByTagName('td');
  // Show the loadtime Save button
  $(save_button).html('<span class="spinner-border spinner-border-sm"></span> Save');
  $(save_button).attr("disabled", true);

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onload = function() {
    if (this.status == 200) {
      columns[2].innerHTML = '<button class="btn btn-primary" onclick="editcategory(this.parentNode)"><i class="zmdi zmdi-edit zmdi-hc-lg"></i></button>';      
    } else {
      // Unsuccessful AJAX call, restore the Save button
      $(save_button).html('Save');
      $(save_button).attr("disabled", false);
    }
  }
  // 
  xmlhttp.open("GET", "...", true);
  xmlhttp.send();
}

功能保存类别（但是，保存按钮）{
var row=but.parentNode，
columns=row.getElementsByTagName（'td'）；
//显示loadtime保存按钮
$（保存按钮）.html（'save'）；
$（保存按钮）.attr（“已禁用”，true）；
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onload=函数（）{
如果（this.status==200）{
列[2]。innerHTML=''；
}否则{
//AJAX调用不成功，请还原保存按钮
$（保存按钮）.html（'save'）；
$（保存按钮）.attr（“已禁用”，false）；
}
}
// 
open（“GET”、“…”、true）；
xmlhttp.send（）；
}

---

}

谁是

保存按钮

？不应该放在诸如

$（'save_button'）

？@MaraBlack之类的引号下。如果是HTML中的按钮，则值在内联侦听器的参数中传递。标记中似乎没有

save_按钮

标记，因此您的建议不起作用。如果需要，我可以提供完整的功能。啊，我的错，没有看到..我不能解决问题，代码似乎可以正常工作。。？请注意，span元素是空的，在内联元素中没有任何内容。您能给我一个与我的案例相关的示例是什么意思