Как заменить новые элементы, добавленные на страницу, с помощью Jquery
-
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/
Я сам только что узнал об этом.Спасибо за вопрос
Надеюсь, это поможет.
ПК