كيف أستبدل عناصر جديدة تمت إضافتها إلى صفحة مع jQuery

Question

إليكم السيناريو ... لدي خانة اختيار AA بجانب كل حقل أقوم باستبداله على الصفحة مع jQuery بنص "حذف" يتيح لي حذف الحقل عبر jQuery ، الذي يعمل بشكل جيد. مثل ذلك...

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

ومع ذلك ، فإن المشكلة تأتي في أنه بعد تحميل الصفحة ، أعطي المستخدم أيضًا خيار إضافة حقول جديدة ديناميكيًا. الحقول الإضافية الجديدة على الرغم من أن مربع الاختيار وليس رابط الحذف لأنه لا يتم استبداله بـ jQuery حيث تتم إضافتها بعد تحميل الصفحة الأولية.

أليس من الممكن استبدال محتوى العناصر الجديدة التي تمت إضافتها إلى الصفحة دون إجراء تحديث الصفحة؟ إذا لم يكن الأمر كذلك ، فيمكنني دائمًا الحصول على قالبان مع ترميز مختلف اعتمادًا على واحد لـ JS وواحد لغير JS ، لكنني كنت أحاول أن أتخلى عن ذلك.

شكرا مقدما.

Answer 1

يمكنك استخدام ال .livequery() توصيل في, ، مثله:

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

يتم تشغيل الوظيفة المجهولة ضد كل عنصر موجود ، وكل منهما الجديد العنصر الذي يطابق المحدد عند إضافته.

Answer 2

إلقاء نظرة على هذا العرض التجريبي Kool. يزيل ويضيف عناصر مثل السحر.

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 وعلى استعداد لاستقبال بعض الأطفال الذين تم إلحاقهم لنفسهم (Gosh الذي يبدو غريبًا).

مكاي ، حتى الآن سهل. الآن وظائف JS.

AddElement وظيفة JavaScript

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 (divnum) {var d = document.getElementById ('mydiv') ؛ var olddiv = document.getElementById (divnum) ؛ D.Removechild (Olddiv) ؛ }

وهذا هو الذي. بوب هو عمك.

هذا مأخوذ من هذا المقال/البرنامج التعليمي: http://www.dustindiaz.com/add-and-remove-html-eelements-dynamically-with-javascript/

لقد تعلمت هذا نفسي للتو. شكرا على سؤالك

امل ان يساعد.

PK