jqueryでページに追加された新しい要素を置き換える方法

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

  •  27-09-2019
  •  | 
  •  

質問

シナリオは次のとおりです。各フィールドの横にAAチェックボックスがあり、jQueryを「削除」テキストでページロードで置き換えます。これにより、jQueryを介してフィールドを削除できます。そのようです...

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

問題はありますが、ページの読み込み後、ユーザーに新しいフィールドを動的に追加するオプションも提供していることです。ただし、新しい追加されたフィールドにはチェックボックスがあり、削除リンクではありません。最初のページのロード後に追加されているため、jQueryに置き換えられていないためです。

ページを更新せずにページに追加された新しい要素のコンテンツを置き換えることはできませんか？そうでない場合は、JSの1つと非JSの1つに応じて、常に異なるテンプレートを持つ2つのテンプレートを持つことができますが、TAHTを回避しようとしていました。

前もって感謝します。

役に立ちましたか？

解決

使用できます .livequery() プラグイン, 、 このような：

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

匿名関数は、見つかったすべての要素に対して実行され、それぞれ 新着 追加のセレクターに一致する要素が追加されます。

他のヒント

この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要素が設定されており、それ自体に追加された一部の子供を受け取る準備ができています（Wierdのように聞こえるGosh）。

Mkay、これまでのところとても簡単です。 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);
}

そして、あなたがしたいなら、

removelement javascript関数

function remofelement（divnum）{var d = document.getElementById（ 'myDiv'）; var olddiv = document.getElementById（divnum）; D.RemoveChild（OldDiv）; }

そしてそれはそれです。あなたの叔父をボブスします。

これは、この記事/チュートリアルから取得しています。 http://www.dustindiaz.com/add-and-remove-html-elements-dynamically withjavascript/

私はこれを自分で学んだばかりです。質問ありがとうございます

それが役立つことを願っています。

PK

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top