使用 jQuery 清除动态加载元素的 innerHTML

Question

我读过的所有内容都导致更多事件处理程序被使用 .live()、.on()、.bind()、.delegate() 等添加。

我之前问了一个问题，可能没有正确回答，所以我投票删除了那个问题并重新问了一个更简单的问题，我相信我可以做剩下的事情。

有没有办法清除带有预定义类的HTML元素的innerhtml，包括通过AJAX等动态加载的那些

所以每次 ajax 调用都放

<div class="triggerElement">something here...</div>

或页面上的类似内容，我需要将其清空。我想我已经正确解释了。如果没有，请告诉我。

编辑

似乎很混乱。 .empty 和其他类似的将不起作用。如果你打电话

$(".omButton").empty();

从索引中，然后某个其他模块稍后通过 AJAX 使用相同的类加载一些东西，它不会清空它。如果我先在页面上有元素，然后调用它，是的，它会起作用....

我需要一些类似于 .live 或 .delegate 的东西，它适用于事后加载的任何内容，因为我尝试过 .empty 和 .html，但它们都不适用于使用 AJAX 加载的内容。

不知道如何解释这一点。认为这很简单。对不起！

编辑 2...

索引包含空函数

$(function(){
    $('.omButton').empty();
    $ajax... to load "loadedContent"
});

<div class="omButton"></div>
<div id="loadedContent"></div>

ajax 返回

json_encode(array('test' => '<div class="omButton">Button Text</div>'));

所以现在索引上的 HTML 是

<div id="loadedContent"><div class="omButton">Button Text</div></div>

但是，由于页面加载时内部 div 不存在，因此 .empty 不会影响它。我需要一些可以放在页面加载上的东西，以“监视”它的任何发生（静态或动态）并将其清空。

希望这有帮助吗？

Answer 1

尝试使用$.ajaxComplete() - 因为这是在每个 ajax 请求完成后触发的

$('body').ajaxComplete(function() {
  $('.triggerElement').empty();
});

Answer 2

试试这个。 .empty

$.ajax({
    ...
    complete: function(){
        $(elementSelectorForWhatYouWantEmptied).empty();
    }
})

或者如果加载的元素是动态放置在DOM中的，那么你可以使用.live()。

$(elementThatIsInDOM).on(event, elementSelectorThatIsDynamicallyAdded, function(){
    $(elementSelectorForWhatYouWantEmptied).empty();
})

Answer 3

如果您使用 ajax 加载内容，并且该内容是带有内容的完整标记

<div class="triggerElement">something here...</div>

并且您想在加载该元素后empty，您需要在加载数据时执行的回调中执行此操作。

$.ajax(
    ....
    success: function(data){
      $(".omButton").empty();
    });