2012-02-01 11 views
2

複数の行を含むフォームがあり、各行にはリンク付きの削除ボタンがあります。これらのボタンにブートストラップ・モーダルを追加するためのリンクを徐々に強化したいと思います。だから私がやっているのは:クリックごとにクリックイベントが追加される

  1. ページ上のすべての削除ボタンの要素を取得します。
  2. 各ボタンをループします。
  3. ボタンごとに、「OK」がクリックされたときに呼び出されるURLを含め、どのボタンがクリックされたかに基づいてモーダルの属性を変更します。

モーダルがトリガされ、「OK」ボタンがクリックされるたびに、それに添付されたURLが前のものに追加されるという点を除いて、すべてが機能しています。

http://jsfiddle.net/bittersweetryan/9TpX8/(コンソールのオープンを持って、その後、何度もOK多くを削除ボタンをクリックしてください)

ここであなたが「OK」にダイアログを起動するたびに別のクリックハンドラをアタッチコード

//anonymous function to grab all delete buttons and turn into a modal 
(function(){ 
    var delBtn = $(".delete"), 
     $modal = $("#modal-delete"); 

    if(!$modal.size()){ 
     $modal = $('<div id="modal-delete" class="modal hide fade"><div class="modal-header"> <a href="#" class="close">&times;</a><h3>Confirm Delete</h3></div><div class="modal-body" id="modal-content"></div><div class="modal-footer"> <a href="#" id="okButton" class="btn danger">OK</a> <a href="#" id="cancelButton" class="btn secondary">Cancel</a> </div></div>').appendTo("body"); 
    } 

    delBtn.each(function(){ 
     var $button = $(this), 
      clickHandler, 
      href= $button.attr("href"); 

     if(href){ 
      clickHandler = function(){ 
       console.log(href); 
       //return window.location=href; 
      }; 
     } 
     else{ 
      clickHandler = $button.click; 
     } 

     $button.attr("data-toggle","modal"). 
       attr("data-target","#modal-delete"); 

     $button.on("click",function(){ 
      $modal.find("#okButton").on("click",function(){ 
       clickHandler(); 
       $modal.modal('hide'); 
      }). 
      end(). 
      find("#cancelButton").on("click",function(){ 

       $modal.modal('hide'); 
      }). 
      end(). 
      find("#modal-content").html($button.attr("title")); 
     }); 
    }); 

})(); 

答えて

3

です。クイックフィックス:一般的に

$modal.find("#okButton").one("click",function(){ 
    clickHandler(); 
    $modal.modal('hide'); 
}) 

Your updated fiddle.

+0

ありがとう、私は1つの機能のAPIドキュメントを読む必要があります。その存在を知らなかった。 – bittersweetryan

1

、jQueryを使って結合ハンドラは、キュー内の新しいハンドラをスティック。既存のハンドラを新しいハンドラで上書きしません。

ほとんどが適切に動的に生成するためのコントロールをバインドしようとし、このことにより、回数を火傷した後、私はonclickのバインディングをセットアップする前に、キュー内の

.unbind("click") 

を貼り付け始めました。

Some new fiddle.

+0

ありがとう、これはまた良いオプションです。私が答えとして最初のものを選んだ理由は、fn呼び出しを取り除くためですが、私はあなたに実用的な解決法のためのアップコートを与えます。 – bittersweetryan

関連する問題