Jquery html不适用于动态添加的元素

Posted 2023-05-08

【中文标题】Jquery html不适用于动态添加的元素

【英文标题】：Jquery html not working on dynamically added element

【发布时间】：2021-07-09 10:31:48

【问题描述】：

我先做这个

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

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

现在我的功能

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

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();

编辑代码写在上面，请检查上面写的，我找不到错误，这就是我正在做的，在这种方法有效的地方休息，我不明白

【问题讨论】：

谁是save_button？不应该放在 $('save_button') 这样的引号下吗？

@MaraBlack 是 HTML 中的按钮，值在内联侦听器的参数中传递。标记中似乎没有 save_button 标记，因此您的建议不起作用。

如果需要，我可以提供完整的功能

啊，我的错，没看到..

我不能reproduce 这个问题，代码似乎可以正常工作..？请注意，span 元素是空的，在该内联元素中没有什么可看的。

【参考方案1】：

编辑问题后，我们可以看到，当检测到响应不成功时，保存按钮在readystatechange 处理程序的else 块中恢复。但是，readystatechange 会触发多次，并且每次触发事件时您都会覆盖原始 Save 按钮的内容，而不是设置 spinner-span，并将其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();

【参考方案2】：

如果您在静态 HTML 中创建它，那么只需使用 .ready(handler) 或 .on("load", handler)。

如果你使用的是 jQuery 的 load() 函数，那么当内容被加载时，你可以运行一个回调：

$('#element').load('sompage.html', function()/ 回调/ );

在回调函数中你可以编写你的函数来调用函数。我希望这对你有用。谢谢

【讨论】：

什么意思可以给我与我的案例相关的样本