jquery - jQuery：追加 html 并更新 DOM

Question

我有这个功能：

$(document).on('scroll', function(e)
{
  if (processing)
     return false;

  if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.9)
  {
     processing = true;

     var resource = $('#lazyLoad').attr('href');

     $.get(resource, '', function(data)
     {
        $('#lazyLoad').remove();

        $('#content').append(data);

        step++;
        processing = false;
     });
  }
});

每次调用此函数时，我都会在页面中添加一些 html 代码。但是当我单击新添加的 html 按钮时，不会触发其他 Javascript 功能。所以我猜DOM元素没有更新。但是如何正确更新 DOM 元素？

我的处理程序如下所示：

$('.article_action.un_read').on('click', function(event)
{
  event.preventDefault();

  var resource = $(this).attr('href');
  var elElemente = $(this);

  $.get(resource, '', function(data)
  {
     var obj = $.parseJSON(data);

     if(obj.status == 1)
        elElemente.html('📕');
     else
        elElemente.html('📖');
  });
});

所以它也使用该on功能。

Answer 1

试试这样：

$('#content').on('click', '.article_action.un_read', function(event) {
    event.preventDefault();

    var resource = $(this).attr('href');
    var elElemente = $(this);

    $.getJSON(resource, '', function(obj) {
        elElemente.html(obj.status == 1 ? '📕' : '📖');
    });
});

Answer 2

您必须将按钮单击与委托事件绑定。

$('#parentElement').on('click', 'button', function () {});

Answer 3

您需要提及事件活页夹声明

$(<selector>).on('click', <handler>);

再次在附加 html 的函数内部。

检查样品小提琴

编辑：但首先你应该在附加 html 的函数中取消绑定旧事件，以防止多次调用的回调。

$(<selector>).off();