jQuery - remove() ne fonctionne pas

J'ai un script qui place les divs en fonction de la position de la souris sur le corps d'une page. J'ai un bouton qui dit "Effacer" et je veux l'utiliser pour effacer les divs créés. Comment puis-je y parvenir?jQuery - remove() ne fonctionne pas

Le script et la source que je l'ai écrit:

HTML

<!DOCTYPE html> 
<html> 
    <body> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
     <script src="bhaiya.js"></script> 
     <button style="z-index: 2000;" class="clear" onclick="clear()">Clear</button> 
    </body> 
</html>

jQuery

$(document).ready(function(){ 

    $(this).mousedown(function(e){ 
     $x = e.pageX; 
     $y = e.pageY; 

     $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>"; 
     $("body").prepend($div); 
    }); 

    function clear() { 
     $(".theDiv").remove(); 
    } 

})

jsFiddle: http://jsfiddle.net/BpAYz/

Toute aide serait appréciée :)

Source

2013-06-08 Mohammad Areeb Siddiqui

Inline gestionnaires d'événements d'attribut HTML ne peut appeler globales fonctions. Votre clear() fonction est pas global car il est défini à l'intérieur de votre gestionnaire de document prêt, de sorte que votre onclick="clear()" ne peut pas le trouver. Vous devez soit déplacer la fonction en dehors du gestionnaire prêt (ce qui en global), ou, mieux, se lier avec le clic jQuery:

$(document).ready(function(){  
    $(this).mousedown(function(e){ 
     var $x = e.pageX; 
     var $y = e.pageY;  
     var $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>"; 
     $("body").prepend($div); 
    }); 

    $(".clear").click(function() { 
     $(".theDiv").remove(); 
    }); 
});

Notez aussi que j'ai ajouté var devant des variables dans votre mousedown gestionnaire: sans var ils deviennent des variables globales, ce qui rend votre code plus sujet aux erreurs et difficile à déboguer. (Sauf si vous avez une bonne raison pour laquelle ils devrait être globals?)

Source

2013-06-08 11:50:07 nnnnnn

merci pour cette information supplémentaire! –

merci l'homme! Merci beaucoup! vous venez d'effacer mon esprit –

De rien. Notez également que les éléments ''

La fonction clear devrait être portée mondiale. Sinon, attribuez un ID button1 au bouton et ajoutez la fonction en tant qu'écouteur d'événements click à l'aide de jQuery.

http://jsfiddle.net/BpAYz/2/

code:

$(document).ready(function() { 

    $(this).mousedown(function (e) { 
     if (!$(e.target).is("#button1")) { 
      $x = e.pageX; 
      $y = e.pageY; 

      $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>"; 
      $("body").prepend($div); 
     } 
    }); 

    $(".clear").click(function() { 
     $(".theDiv").remove(); 
    }); 

})

HTML

<body> 
    <button id="button1" style="z-index: 2000;" class="clear">Clear</button> 
</body>

Je viens de modifier votre code. Veuillez utiliser le mot clé var lors de la déclaration de variables dans une fonction.

Source

2013-06-08 11:44:12 Diode

mais je l'ai déjà ajouté la classe à ce bouton? cela va-t-il importer? –

voir comment il devrait être fait http://jsfiddle.net/BpAYz/2/ – Diode

Vous devez faire ceci: -

Effacer

$(document).ready(function(){ 

$(this).mousedown(function(e){ 
    $x = e.pageX; 
    $y = e.pageY; 

    $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>"; 
    $("body").prepend($div); 
}); 

$(document).on("click", "button.clear", function(e){ 
    e.stopPropagation(); 
     $(".theDiv").remove(); 
})

})

Source

2013-06-08 11:45:11 pvnarula

cela va ajouter l'auditeur de clic à tous les boutons, mais je veux le bouton avec la classe « .clear » –

Vérifiez maintenant. – pvnarula

ok, mais si je supprime le "bouton" il y aura-t-il un problème? –

le faire comme ceci: http://jsfiddle.net/Qn9yL/1/

Vous devez joindre au clic même du bouton plutôt que d'utiliser onclick.

$(document).ready(function(){ 

    $(this).mousedown(function(e){ 
     $x = e.pageX; 
     $y = e.pageY; 

     $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>"; 
     $("body").prepend($div); 
    }); 

    $('#clear').click(function(e){ 
     e.preventDefault(); 
     $(".theDiv").remove(); 
    }); 

})

Vous souhaitez également faire l'e.preventDefault(); pour arrêter l'événement bouillonnant alors et la création d'une nouvelle div etc.

Source

2013-06-08 11:50:23

-2

Cela fonctionne avec des éléments successifs:

<style media="all"> 
.theDiv { 
    display:none; 
} 
</style>

Source

2014-12-08 08:16:17

jQuery - remove() ne fonctionne pas

Répondre

Questions connexes