Question

我想创建一个动态点击jQuery的按钮。用户完成并点击按钮后，我想销毁按钮和jQuery点击，直到我需要重新创建它。

我不确定如何在jQuery中执行此操作。我知道jQuery.live是一个选项，但我不确定这是否会比我想做的更好或更差。

Answer 1

Live会工作得很好。如果您想避免使用直播，可以在将新按钮添加到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>

希望这有助于某人，我没有忘记任何事情。

使用jQuery将单击绑定到动态按钮？

3 个答案: