jQuery, Event Binding, gör jag rätt?

mojitoo · 2012-05-16, 22:40

För att bättre visa vad som inte fungerar ger jag er ett exempel, det fungerar inte med scope här:

PHP-kod:


			
$('.comment', scope).on('click', function(e) {

Och jag behöver det i mitt projekt annars så klickas det hur många gånger som helst.

index.html

PHP-kod:


			
<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script src="js/script.js" type="text/javascript"></script>

</head>

<body>

    <div class="comment_wrapper">

        <a href="#" class="comment">Write your comment</a>

    </div>



    <p>

        <a href="#" class="insert">Insert New Object</a>

    </p>

</body>

</html>

script.js

PHP-kod:


			
$(document).ready(function() {





    var bindBehaviors = function(scope) {



        $('.comment', scope).on('click', function(e) {



            e.preventDefault();

            console.log('comment');

        });

    }



    



    $('.insert').on('click', function(e) {



        e.preventDefault();

        console.log('insert');



        var tempDiv = '<div class="comment_wrapper"><a href="#" class="comment">Write your comment</a></div>';

        $(this).before(tempDiv);

        bindBehaviors(tempDiv);

    });



    bindBehaviors(this);





});

dAEk · 2012-05-18, 12:44

En sak jag reagerar på är att du i din $(".insert")-klicklyssnare skickar in en sträng till din bindBehaviors-method som dock förväntar sig en selektor eller eventuellt ett jquery-objekt. Eftersom du skickar in en sträng till metoden kan den inte regga eventlyssnaren som den ska. Jquery har ibland beteendet att - på gott och ont - faila tyst när man gör saker som inte funkar. Man får inte reda på att man gör nånting tokigt utan saker och ting funkar helt enkelt bara inte.
Även om man rättar misstaget ovan och istället skickar in rätt scope (dvs bindBehaviors(".comment_wrapper")) finns det en liten tankevurpa där. De tidigare registrerade eventlyssnarna finns kvar men när bindBehaviors körs igen reggas det en till för varje ny rad som infogas. Dvs lägger man till en kommentar och sedan klickar på den första kommentarslänken kommer det resultera i 2 rader i konsollen.

En annan sak som är värd att nämna i när man pysslar med javascript är att man inte behöver regga en lyssnare på varje element. Det är t.o.m. ganska dumt om man kan tänkas ha många element som man ska kunna klicka på. Då är det bättre att använda sig av s.k. delegates som innebär att man reggar en (1) eventlyssnare oavsett hur många kommentarer man har. Det funkar som så att man lägger eventlyssnaren på föräldernoden och säger åt den att köra en method när event triggas på en child-selektor.

I ditt fall skulle javascriptet kunna skrivas om till nåt i stil med:

Kod:

$(document).ready(function() { 
	
	$('.insert').on('click', function(e) { 
		e.preventDefault(); 
		console.log('insert'); 
		
		var tempDiv = '<div class="comment_wrapper"><a href="#" class="comment">Write your comment</a></div>'; 
		$(this).before(tempDiv); 
	}); 

	$("body").delegate(".comment", "click", function (event) {
		event.preventDefault(); 
		console.log('comment'); 
	});
});

Eftersom det är en delegate som används behöver du inte regga eventlyssnare på nya element som du försökte göra tidigare.

Istället för att lägga lyssnaren på body kan du såklart wrappa dina kommentarer runt t.ex. <div id="#comments"> och skicka in id:t i delegaten istället för body.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

jQuery, Event Binding, gör jag rätt?