Liez un clic sur un bouton dynamique avec jQuery?

voix
1

Je veux créer un bouton qui a un clic jQuery à la volée. Une fois l'utilisateur fait et appuyez sur le bouton que je veux détruire le bouton et le clic jQuery jusqu'à ce qu'une fois que je besoin recréée.

Je ne sais pas comment faire cela dans jQuery. Je sais que jQuery.livec'est une option , mais je ne suis pas sûr que ce serait mieux ou pire que la façon dont je veux le faire.

Créé 27/08/2009 à 04:33
source utilisateur
Dans d'autres langues...                            


3 réponses

voix
0

Cela devrait fonctionner. Changer html dans les chaînes de façon appropriée:

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

Voici un site de démonstration montrant en action.

Créé 27/08/2009 à 04:41
source utilisateur

voix
2

Vivre fonctionnerait très bien. Si vous souhaitez éviter d'utiliser en direct, vous pouvez câbler le nouveau bouton que vous ajoutez au DOM.

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

Avec en direct, il devient ceci:

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

$("#sweetness").live("click", function() {
  $(this).remove();
});
Créé 27/08/2009 à 04:45
source utilisateur

voix
0

Je suis désolé de poster à une telle question ancienne et une réponse. J'ai eu un problème similaire et cette réponse m'a aidé, mais ne me comprenez pas tout à fait là. Après tâtonnement ... Voici ma solution pratique pour ajouter des zones à la page Web et de les supprimer. Je l'utilise avec des champs de formulaire dynamique, mais vos besoins peuvent varier.

Voici une partie de la forme dans la partie statique de la page.

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

Ensuite, nous avons besoin des fonctions JavaScript. Ceux utilisent 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>

Espérons que cela aide quelqu'un et je ne rien oublier.

Créé 22/02/2012 à 19:44
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more