0

因此，我目前正在使用 .append() 向网页上的所有帖子添加功能，但是当页面上加载了其他帖子时，附加功能不会包含在新内容中 - 我正在尝试想出一种方法来确保所有新内容也具有附加功能。

$(this).append('<div id="new_feature></div>');

像这样的东西？

$(this).live().append('<div id="new_feature></div>');

也许有一种方法可以让它不断地附加在一个循环中？

4

6 回答 6

3

有 DOMNodeInserted 事件：

$('button').click(function() {
  $('#appendme').append($('<div class="inner">').text(Math.random()));

})

$('#appendme').on('DOMNodeInserted','.inner',function() {
 console.log(this); 
});

演示

更新：这似乎在 IE 中不起作用，propertychnage也尝试事件处理程序（$('#appendme').on('DOMNodeInserted,propertychange'）但我不确定，现在没有 IE 来检查这个。

update2：Domnode* 根据 mdn 似乎已弃用，他们告诉使用MutationObserver对象代替

update3：似乎这里不是 MutationEvents 的跨浏览器解决方案，请参阅这个答案，所以我的建议是使用上面的代码，如果支持事件并回setTimeOut退到或 livequery 选项。

update4：如果你只依赖.append()你可以这样补丁jQuery.fn.append()：

jQuery.fn.append=function() {
                return this.domManip(arguments, true, function( elem ) {
                        if ( this.nodeType === 1 || this.nodeType === 11 ) {
                                this.appendChild( elem );                             
                                $(elem).trigger('appended');
                        }
                });
        };

$('button').click(function() {
  $('#appendme').append($('<div class="inner">').text(Math.random()));

})

$('#appendme').on('appended','.inner',function() {
 console.log(this); 
});

演示2

可能更正确的是jQuery.fn.domManip像这里一样恶搞

于 2013-01-12T03:27:42.997 回答
2

jQuery文档：

不再推荐使用 .live() 方法，因为更高版本的 jQuery 提供了没有缺点的更好方法。

您可以使用可以每 n 毫秒setTimeout()检查一次新s 的功能。<div>

$(function(){
    setInterval("Check4NewDivs();",1000);
});

所以说this是一个带有 的 div class="comment newdiv"，所以当它第一次出现在页面上时，它有一个类newdiv可以让函数知道它只是动态创建的。

function Check4NewDivs(){
    $(".comment .newdiv").each(function(){
        $(this).append('<div class="new_feature"></div>').removeClass("newdiv");
    });
}
于 2013-01-12T03:10:12.850 回答
1

append不是appened。_
live是一个已弃用的事件处理程序。它不是这样使用的。改为使用on。 http://api.jquery.com/live/

因此，当您单击 时，将运行以下代码selector。

$(document).on('click', 'selector', function() {
    $(this).append('<div id="new_feature></div>');
});
于 2013-01-12T03:07:24.187 回答
1

不，没有标准的方法可以做到这一点。有一个关于在插入 DOM 元素等时触发的事件的提议，但你不能依赖它。

而是依赖于：

  • （最好）回调 - 只要调用函数确保存在这样的附加片段，只要你拉一些东西（但在你成功地从服务器拉出来并插入 DOM 之后，而不是更早），或者
  • 持续检查 - 就像使用 in setInterval()or setTimeout()，但这将是不必要的处理，你永远不会得到即时追加，除非你将一直执行处理繁重的检查，
于 2013-01-12T03:08:14.800 回答
0

使用加载功能：

$(item).on('load',function(){
    $(this).append('<div id="new_feature"></div>');
});

这将在项目加载后添加附加项目作为回调。我也会选择某种动态 ID 创建者，而不是总是附加具有相同 ID 的东西，但这只是我。

于 2013-01-12T03:08:15.527 回答
0

您必须绑定到页面上已存在的元素。我写了一个例子，我在其中制作附加内容。

JSFiddle 上的演示

HTML

<div id="container">
  <div id="features">
  </div>
  <br />
  <a href='#' id='clickme'>click me to add feature</a>
</div>

JS

$(function() {
  $('#clickme').on('click', function(e) {
    $('#features').append('<div class="new_feature">new feature</div>');
  });

  $('#features').on('click', '.new_feature', function() {
    alert('i am live.');
  });
});
于 2016-08-14T21:00:45.543 回答