jQueryのリンクの追加を停止します...

Question

私は、要素が複製されるたびにボタンを作成するはずの関数を持っています。問題は、それが既に存在するにもかかわらず、そのdiv内のすべての要素にボタンを追加していることです。私はこれが単純な仕事だと確信していますが、ちょうど傾けることは私の頭をその周りに得る。

<h1>skapa ett moment</h1> 

<?php foreach($rows as $r) : ?> 

    <div class="span6 part"> 
     <button id="add_part" class="btn-mini btn pull-right">Lägg till</button> 
     <div class="moment_content"> 
      <h1 class="part_heading"><?php echo $r->title; ?></h1> 
      <h4 id="id" style="display:none;" class="pull-left"><?php echo $r->id;?></h4> 
      <div class=""><?php echo $r->content; ?></div> 
     </div> 
    </div> 

    <div id="result" class="span3 pull-right"> 
    </div> 

<?php endforeach; ?> 

    <script type="text/javascript"> 
     var knapp = $('.part').find('.btn').hide(); 
     $('.part').hover(function(){ 
      $(this).toggleClass('well'); 
      $(this).children('.btn').toggle(); 
     }); 


     $('button#add_part').on('click', function(){ 
      var add = $(this).next().clone().appendTo('#result'); 
      if ($('<a class="btn-mini pull-right btn" href="#">ta bort</a>').length > 0) 
      { 
       $('<a class="btn-mini pull-right btn" href="#">ta bort</a>').insertBefore('#result .part_heading'); 
      } 
      if ($('<a class="btn-mini pull-right btn" href="#">ta bort</a>').length > 1){ 
       $('#result a.btn').remove(); 
      } 
     }); 


    </script> 

Answer 1

私は仕事するには、このjsBin live example

ような何かをするだろう、あなたはいくつかの変更が必要です。

• をすべてidの
• がボタン
にクラスとして btn-add-partを追加、削除
• <h4>をリムーバブルリンクで変更する
• は、追加したid年代にアクセスしたい場合、私はdata-content-id私が仮定しているよう
• は（あなたのループの外<div id="result">を置く<div>ブロックの一部として含まれていることは、すべての

後に何をしたいのです

$(function(){ 

    // hide all "ADD" buttons 
    $(".btn-add-part").hide(); 

    // on mouse over .part 
    $(".part").hover(function() { 
     $(this).toggleClass("well").find(".btn-add-part").stop().fadeToggle(); 
    }); 

    // on "ADD" click 
    $(".btn-add-part").click(function() { 
    // clone DOM block 
    var block = $(this).closest(".part").find(".moment_content").clone(); 
    // show remove link 
    block.find(".btn-rem-part").show(); 
    // append to result 
    block.appendTo("#result"); 
    }); 

    // on "REMOVE" click 
    $(".btn-rem-part").live("click", function() { 
    $(this).closest(".moment_content").fadeOut("slow", function() { 
     // Now that faded, let's remove it... 
     $(this).remove(); 
    }); 
    }); 

}); 

---

：私も

jQueryのコードは、本質的である...フォローアップしやすいように少しスタイリングしていますあなたは同じid => **無効なHTMLと `id` =>複数の要素を持つ要素のクローンを作成している

を追加し、[保存]ボタン

// on "SAVE" 
    $(".btn-Save").click(function() { 
    // empty? 
    if($("#result").length > 0) { 

     var r = ""; 
     $("#result").find(".moment_content").each(function() { 
     // for each block added 
     if(r.length > 0) r += ", "; 
     r += $(this).attr("data-content-id"); 
     }); 

     alert("Submiting the following ID's: " + r); 
     return true; 

    } 
    alert('Nothing to save...'); 
    return false; 
    });