jQuery: div n'apparaît pas avant le deuxième clic? Je le veux sur le premier. = \

Question

Premier clic: vide floatymessage div. deuxième clic et après: fonctionne.

jQuery:

function floatymessage(message){ 
    var box = $j(".floatymessage") 
    if (box.length == 0) { 
     $j('body').append("<div class='floatymessage'></div>"); 
    } 
    box.html(message); 
    // center it 
    box.css("left", ($j(window).width() - box.width())/2+$j(window).scrollLeft() + "px"); 
    box.fadeIn('slow'); 

    setTimeout(function(){$j('.floatymessage').fadeOut('slow');},3500); 
} 

lien:

<a href="#" onclick="floatymessage('Asking questions is not allowed.');"></a> 

pour floatymessoge css:

div.floatymessage { 
    position: absolute; 
    top: 20%; 
    width: 300px; 
    height: 50px; 
    background: black; 
    color: white; 
    text-align: center; 
    filter:alpha(opacity=75); 
    -moz-opacity:0.75; 
    -khtml-opacity: 0.75; 
    opacity: 0.75; 
    box-shadow: 10px 10px 5px #000; 
    border: 1px solid black; 
    border-bottom-left-radius: 5px 5px; 
    border-bottom-right-radius: 5px 5px; 
    border-top-left-radius: 5px 5px; 
    border-top-right-radius: 5px 5px; 
    line-height: 50px; 
    z-index: 10000; 
    display: none; 
} 

Answer 1

Votre logique avec la boîte il manquait une étape, si elle est pas déjà dans le dom vous devez définir la variable « boîte » à la nouvelle div:

if (box.length == 0) { 
    box = $j("<div class='floatymessage'></div>"); 
    $j('body').append(box); 
} 

plus,

Vous pouvez utiliser le La méthode que vous avez configurée, mais lors de l'utilisation d'une balise d'ancrage pour déclencher un événement javascript, vous devez ajouter un retour false pour l'empêcher de le traiter comme un lien normal.

<a id="mine" href="#" onclick="floatymessage('msg');return false;">run</a> 

Il est une meilleure pratique de lier les événements dans ce cas:

$j("#mine").click(function() { floatymessage('msg'); }); 

Vous pouvez obtenir le même effet en utilisant une balise span au lieu d'une balise d'ancrage qui veut accéder à une URL.

<span id="mine" onclick="floatymessage('msg');">run</span> 

Answer 2

lient l'événement click avec jQuery

$(function() { // after the document is loaded 
    $j("a#someId").click(function(e){ // when the anchor is clicked (give it an ID) 
     e.preventDefault(); 
     floatymessage("Asking questions is not allowed."); 
    }); 
});