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

StackOverflow https://stackoverflow.com/questions/3859932

  •  27-09-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

Это было полезно?

Решение

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

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

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

Другие советы

Взгляните на эту крутую демо-версию.Он удаляет и добавляет элементы, как шарм.

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

Вот как:

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

<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

function RemoveElement (divnum) {var d = document.getElementById ('myDiv');вар olddiv = document.getElementById(divNum);d.removeChild(olddiv);}

и это все.Боб твой дядя.

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

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

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

ПК

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top