jQueryを使用してクリックをダイナミックボタンにバインドしますか？

Question

jQueryのクリックをオンザフライで行うボタンを作成したいと思います。ユーザーが完了してボタンを押すと、ボタンを破棄し、jQueryのクリックを再作成する必要があるときまでクリックします。

jQueryでこれを行う方法がわかりません。私はjQuery.liveが選択肢だと知っていますが、これが良いか悪いかわかりません。

Answer 1

ライブはうまく動作します。ライブを使用しないようにするには、新しいボタンをDOMに追加するときに新しいボタンを押し上げることができます。ライブで

function addNewButton() { 
    $("sweet_selector_here").append("<input type='button' id='sweetness' value='press me, i am awesome' />"); 
    $("#sweetness").click(function() { 
    $(this).remove(); 
    }); 
} 

それはこのようになります。

function addNewButton() { 
    $("sweet_selector_here").append("<input type='button' id='sweetness' value='press me, i am awesome' />"); 
} 

$("#sweetness").live("click", function() { 
    $(this).remove(); 
}); 

Answer 2

これは動作するはずです。文字列のhtmlを適切に変更してください。

$('#targetdiv').append($("<div>foobar</div>").click(function(evt) { $(this).remove(); })) 

ここにはdemo siteの動作が示されています。

Answer 3

は、私はそのような古いと答えた質問に投稿してすみません。私は同様の問題を抱えていて、この回答が私を助けてくれましたが、かなり私をそこに連れて来ませんでした。試行錯誤のあと... Webページに領域を追加して削除する私の実際的な解決策です。私は動的フォームフィールドでそれを使用しますが、あなたのニーズは異なる場合があります。

ここは、ページの静的部分のフォームの一部です。

<fieldset> 
    <legend>Email-tauluun</legend> 
    <a class="button_ajax email-add">Add new area</a> 
    <p> 
     <span class="email_original_area"> 
     <label>Email: 
      <input type="text" name="emails[]" id="email0" /> 
     </label> 
     </span> 

     <!--Below we add some more areas--> 
     <span id="email_add_area"></span> 
    </p> 
</fieldset> 

JavaScript機能が必要です。これらはjQueryを使用します。

<script type="text/javascript"> 

//we need a counter for dynamic fields 
var cnt=0; 

$(document).ready(function(){ 
    $('.email-add').click(function(){ 

    cnt += 1; //let's count... 

    $('#email_add_area').append(
    '<span class="dynExtra"><br /><label>Email: ' + 
    '<input type="text" name="emails[]" id="email' + cnt + '" /></label>' + 
    '</span>' 
); 

    //this function creates a button for newly created area 
    //must be done after the creation of the area 
    addRemover(); 
    }); 
}); 

function addRemover() { 
    //appends remove button to the last created area 
    $('<a class="button_ajax dynExtra-clear" name="dynExtra-clear">Remove area ' + cnt + '</a>').appendTo('#email_add_area'); 

    //remove the clicked button and it's previous sibling 
    $('.dynExtra-clear').click(function(){ 
    $(this).prev().remove(); 
    $(this).remove(); 
    }); 
} 

</script> 

うまくいけば、これは、誰かを助け、私は何も忘れませんでした。