ボタンを動的に追加または削除する方法

-1

追加ボタンをクリックすると、削除ボタンが変更されます。しかし、ボタンをもう一度追加するために削除ボタンを変更することはできません。あなたはjQueryを使ってDOM要素を変更するとボタンを動的に追加または削除する方法

<head> 
<script type="text/javascript" src="assets/js/jquery-2.0.3.min.js"> </script> 

<script type="text/javascript" > 
    $(document).ready(function() 
    { 
     $(".add").click(function(){ 
      var element = $(this); 
      var I = element.attr("id"); 
      var info = 'id=' + I; 

      $("#" + I).attr("class", "remove"); 
      $(".remove").text("Remove"); 
      return false; 
     }); 
    }); 
</script> 
<script type="text/javascript" > 
    $(document).ready(function() 
    { 
     $(".remove").click(function(){ 
      var element = this.id; 
      var I = element.attr("id"); 
      var info = 'id=' + I; 

      $("#" + I).attr("class", "add"); 
      $(".add").text("add"); 
      return false; 
     }); 
    }); 
</script>

<a class="add" id="1" href="#"> Add </a>

出典

2016-04-07 Oo Aung Htet Paing

protip： 'this.id'ネイティブDOMスコープを使用してオーバーヘッドを節約jQuery –

あなたのHTMLを表示することもできますか？デフォルトでどのクラスを使用しているのか推測するのは難しいです。 – Stuart

Add –

、$（ドキュメント）.ready（）内にロードされるものは、変更を認識しません。あなたはdocument.readyに記載されている両方の機能を持っている

<script type="text/javascript" > 

    $(document).ready(function() 
    { 
     addFunction(); 
     removeFunction(); 
    }); 

    function addFunction(){ 
      $(".add").click(function(){ 
       var element = $(this); 
       var I = element.attr("id"); 
       var info = 'id=' + I; 
       $("#result").text(I); 
       $("#" + I).attr("class", "remove"); 
       $(".remove").text("Remove"); 
       removeFunction(); 
       return false; 
      }); 
    } 
    function removeFunction(){ 
     $(".remove").click(function(){ 
      var element = $(this); 
      var I = element.attr("id"); 
      var info = 'id=' + I; 
      $("#result").text(I); 
      $("#" + I).attr("class", "add"); 
      $(".add").text("add"); 
      addFunction(); 
      return false; 
     }); 
    } 
</script>

出典

2016-04-07 19:02:01

ありがとうMohammed Alsaedi –

問題ありません！私はちょうどあなたのHTMLに気づいた、それは、そのクラスは後でjQueryによって後で追加されるので、document.readyからのremoveFunction（）への最初の呼び出しを削除することができるようです。 –

ので、あなた：あなたはどうすることができ、他の関数の最後に再び各を呼び出し、その後、document.ready上でこれらを呼び出し、関数内で各ステップをラップでイベントハンドラはまだ存在しないため、.removeクラスにアタッチすることはできません。私は委任イベントを使用することをお勧めします：

$(".LocationOfYourButtonInTheDom").on("click", "ThingBeingClicked", function() { 
    //code here 
});

編集： ThingBeingClickedがイベントをトリガーDOMオブジェクトの種類になり、あなたのケースで、これは「」タグ

になりますが、イベントの詳細を読むことができますjquery "on" documentationからの委任。

出典

2016-04-07 19:02:25 Culyx

ボタンを動的に追加または削除する方法

答えて

関連する問題