javascript - 更改元素上的 HTML 时的事件监听器

Question

我有这个问题，我需要能够捕获 html 元素内的 html 更改。

我有一个按钮正在用 data-* 更新他的 html当我向下滚动页面时，它显示 Load More当滚动触发时，它会显示一个 gif <img id="img-loading" src="assets/img/loading-2.gif" width="170" height="113">然后再次显示Load More直到有元素为止。

当 gif 可见时我能够捕获，然后是他的父 div不应该有 CSS 边框。

<div class="tg-ajax-button tg-nav-color tg-nav-border tg-nav-font" data-item-tt="119" data-button="Load More" data-loading="<img id=&quot;img-loading&quot; src=&quot;assets/img/loading-2.gif&quot; width=&quot;170&quot; height=&quot;113&quot;>" data-no-more="No more item" data-remain="" style="color: rgb(228, 229, 230);">
<span class="tg-nav-color sp-btn-gray" style="color: rgb(228, 229, 230);">Load More</span>
</div>

我尝试过使用 jQuery change()在 html 上:

$('.tg-ajax-button .tg-nav-color').html().change(function() {
  alert('changed');
});

但是这不起作用。

提前致谢

<小时/>

我的解决方案:

我正在使用 WordPress 插件“The Grid”，它使用 AJAX 请求来加载网格中的元素。为了添加 gif 而不是文本，我使用了 jQuery html()更改按钮内的 html .ajaxSend()

$(document).ajaxSend(function(){
    if ($('test').hasClass('img-loading')){
      $('test').html('<img id="img-loading" class="img-loading" src="http://www.h-57.com/test/wp-content/themes/jupiter-child/assets/img/loading-2.gif" width="170" height="113">');
      $('test').parent('span').attr('style',  'border-color: transparent !important');
    }
});

现在一切工作正常，但我认为它相当困惑，所以如果有人有更好的想法，请告诉我。 谢谢

Answer 1

将点击事件附加到元素。当用户单击按钮时，在 id="demo"的

元素中输出“Hello World”: 根据您的需要使用代码

document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

希望这有帮助:D