jQuery-Shake-on-Clik auf div - schüttelt, egal wo ich klicke

Question

Ich versuche, eine <div> schütteln, wenn das div SELSELF geklickt wird, aber bis jetzt, das <div> schüttelt, egal wo ich auf die klicke Seite.

Hier ist mein Code:

#port-two { 
 
    color: white; 
 
    background: black; 
 
    height: 250px; 
 
    margin-bottom: 10px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    resize: vertical; 
 
    text-align: center; 
 
    font-size: 35px !important; 
 
    font-family: 'Exo', sans-serif !important; 
 
    font-weight: 200 !important; 
 
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<script> 
 
    $(document).click(function() { 
 
    $("#port-two").effect("shake"); 
 
    }); 
 
</script> 
 

 
<div id="port-two" class="me">this is what's supposed to shake WHEN IT ITSELF IS CLICKED. It now shakes no matter where you click :(</div>

Answer 1

Es ist einfach, weil Sie den Event-Handler an den document angebracht. Um zu tun, was Sie benötigen, sollten Sie es an das Element #port-two anhängen. Versuchen Sie folgendes:

#port-two { 
 
    color: white; 
 
    background: black; 
 
    height: 250px; 
 
    margin-bottom: 10px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    resize: vertical; 
 
    text-align: center; 
 
    font-size: 35px !important; 
 
    font-family: 'Exo', sans-serif !important; 
 
    font-weight: 200 !important; 
 
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<script> 
 
    $(function() { 
 
    $('#port-two').click(function() { 
 
     $(this).effect("shake"); 
 
    }); 
 
    }); 
 
</script> 
 

 
<div id="port-two" class="me">It now shakes only when clicked :)</div>

Answer 2

Sie haben das Click-Ereignis "Dokument" anstelle von Ihrem Element hinzugefügt. Ich würde auch empfehlen, dass Sie etwas kapseln, die auf das DOM mit $ (document) .ready ...

$(document).ready(function() { 
    $("#port-two").click(function() { 
     $(this).effect("shake"); 
    }); 
});