jquery .live() и.append()

Question

Поэтому в настоящее время я использую.append() для добавления функции ко всем публикациям на веб-странице, но когда на страницу загружаются дополнительные сообщения, добавленные функции не включаются в новый контент - я пытаюсь придумать способ убедиться, что весь новый контент также имеет добавленную функцию.

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

Что-то вроде этого?

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

Может быть, есть способ сделать его постоянно добавляющимся в цикле?

Answer 1

jQuery документация:

Использование метода.live() больше не рекомендуется, так как более поздние версии jQuery предлагают лучшие методы, которые не имеют своих недостатков.

Ты можешь использовать setTimeout() функция, которая может проверять наличие новых <div>с каждые n миллисекунд.

$(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");
    });
}

Answer 2

Есть событие DOMNodeInserted:

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

})

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

DEMO

обновление: это, кажется, не работает в 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); 
});

demo2

может быть правильнее подделать jQuery.fn.domManip как здесь

Answer 3

Нет, стандартного способа сделать это не существует. Было предложение событий, которые будут запускаться всякий раз, когда вставляются элементы DOM и т. Д., Но вы не можете полагаться на это.

Вместо этого полагайтесь на:

• (предпочтительно) обратные вызовы - просто вызывайте функцию, обеспечивающую существование таких добавленных фрагментов, всякий раз, когда вы что-то извлекаете (но после того, как вы успешно извлекли это с сервера и вставили в DOM, не раньше), или
• постоянные проверки - как использование в setInterval() или же setTimeout(), но это будет ненужной обработкой, и вы никогда не получите мгновенное добавление, если только вы не будете постоянно выполнять интенсивные проверки,

Answer 4

Это append не appened,
live является устаревшим обработчиком событий. Это не используется таким образом. использование on вместо. http://api.jquery.com/live/

Итак, следующий код будет запускаться при нажатии selector,

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

Answer 5

Вы должны привязать к элементу, который уже существует на странице. Я написал пример, где я делаю добавленный контент в прямом эфире.

ДЕМО на 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.');
  });
});

Answer 6

Используйте функцию загрузки:

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

Это добавит добавление элемента в качестве функции обратного вызова после загрузки элемента. Я бы также выбрал какой-то тип создателя динамического идентификатора, а не всегда добавлял вещи с одним и тем же идентификатором, но это только я.