Evènement non déclenché

[Colmea]

Bonjour à tous,

Depuis quelques temps je tente de mettre en place un chat avec BeaconPush.
J'ai donc testé le listener et l'envoi d'une requête Ajax pour un nouveau message. Les deux scripts marchent, mais quand je les mets ensemble sur la même page, ce n'est plus le cas ...

Avec le script ci-dessous, ce n'est que le listener qui fonctionne (en envoyant un message depuis beaconpush, mon listener le détecte bien et l'affiche dans mon chat), mais l'évènement click() de #send-message ne se déclenche plus.

Voyez-vous d'où cela peut venir ?

Merci d'avance pour votre aide

<script type="text/javascript" src="http://beaconpush.com/1/client.js"></script>

<script type="text/javascript">Beacon.connect("dce56210",[""]);</script>

<script type="text/javascript">

Beacon.connect('dce56210', ['mychannel']);

Beacon.listen(function (newMessage) {

	$("#messages").append(newMessage.data.pseudo + ': ');

	$("#messages").append(newMessage.data.message + '<br />');

});



$("#send-message").click(function(){

	var value = $("#message_form").val();

				$( "#ajax-loader" ).css('display', 'inline');

				$.post("membre/envoyerMessageAjax",

				{message : value},

				function(data)

				{

					$( "#ajax-loader" ).css('display', 'none');

				});		

});

</script>



<div id="messages" style="border: 1px solid silver; width: 400px; height: 100px">

&nbsp;



</div>

<strong>Colmea</strong> &nbsp;



<input type="text" name="message_form" id="message_form" size="40" /> &nbsp;

<div  style="width: 40px; height: 50px; border: 1px solid black">

	&nbsp;

	<img id="send-message" src="/images/cercle_vert.png" width="35" />

</div>

</p>

[Plume]

Un récapitulatif de ce qui a été dit sur IRC.

• Remplacer l'image par quelque chose de sémantiquement correct.
  
• Remplacer :
  

  $("#send-message").click(function(){})

  Par :
  

  $("#send-message").live('click', function(event){})

• Enlever un des 2 appels à Beacon.connect()
  

[Colmea]

Merci Who, tu es une mère pour moi.

[Colmea]

Problème réglé.

Apparemment grâce au .live à la place du .click

Merci

[Sephi-Chan]

Définir un event listener via la méthode $(selector).live() permet aux éléments concernés par le sélecteur d'être concernés, même s'ils ont été ajouté aux DOM après le chargement du Javascript (typiquement du contenu injecté via Ajax).


Sephi-Chan