用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

对不起张贴到这样一个又老又一个回答问题。我有类似的问题，这个答案帮助我，但没有让我在那里。经过试验和错误...这是我的实际解决方案，用于向网页添加区域并将其删除。我使用它与动态表单域，但您的需求可能会有所不同。

以下是页面静态部分的表单部分。

<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> 

希望这可以帮助别人，我什么也没忘记。