Как заменить новые элементы, добавленные на страницу, с помощью Jquery - PullRequest
Новая
       28

Как заменить новые элементы, добавленные на страницу, с помощью Jquery

0 голосов
/ 05 октября 2010

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

$(".profile-status-box").each(function(){ $(this).replaceWith('<span class="delete">' + 'Delete' + '</span>') });

Проблема, однако, заключается в том, что после загрузки страницы я также даю пользователю возможность динамически добавлять новые поля.Новые добавленные поля имеют флажок, а не ссылку удаления, поскольку они не заменяются jquery, поскольку они добавляются после начальной загрузки страницы.

Нельзя ли заменить содержимое новых элементов, добавленных на страницу, без обновления страницы?Если нет, у меня всегда может быть два шаблона с разной разметкой, в зависимости от одного для js и одного для не js, но я пытался избежать taht.

Заранее спасибо.

Ответы [ 2 ]

3 голосов
/ 05 октября 2010

Вы можете использовать плагин .livequery() , например: 

$(".profile-status-box").livequery(function(){ 
  $(this).replaceWith('<span class="delete">Delete</span>') 
});

Анонимная функция запускается для каждого найденного элемента и каждого нового элементасопоставляя селектор по мере их добавления.

0 голосов
/ 05 октября 2010

Посмотрите на эту демоверсию kool.Он удаляет и добавляет элементы, такие как очарование.

http://www.dustindiaz.com/basement/addRemoveChild.html

Вот как это делается:

Прежде всего, (x) html очень прост. xHTML Snippet 

<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>
<div id="myDiv"> </div>

Скрытый элемент ввода просто дает вам возможность динамически вызывать номер, с которого вы могли бы начать.Это, например, можно установить с помощью PHP или ASP.Обработчик события onclick используется для вызова функции.Наконец, элемент div установлен и готов к приему некоторых дочерних элементов (черт возьми, это звучит странно).

Хорошо, пока все просто.Теперь JS функционирует.

Функция JavaScript addElement 

function addElement() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
  ni.appendChild(newdiv);
}

А если хотите,

Функция JavaScript removeElement

function removeElement (divNum) {var d = document.getElementById ('myDiv');var olddiv = document.getElementById (divNum);d.removeChild (olddiv);}

и это все.bobs ваш дядя.

Это взято из этой статьи / учебника: http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

Я только что узнал это сам.спасибо за вопрос

Надеюсь, это поможет.

PK

...