javascript - 使用 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 不会影响它。我需要一些可以放在页面加载上的东西，以“监视”它的任何发生（静态或动态）并将其清空。

希望这有帮助吗？

score 5 · Accepted Answer

Try using $.ajaxComplete() - as this is triggered after every ajax request completes

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

score 1 · Accepted Answer

尝试这个。。空的

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

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

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

score 0 · Accepted Answer

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

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

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

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

3 回答 3