Jump to content
Sign in to follow this  
vince78

Fonction jquery dans une autre fonction jquery

Recommended Posts

Bonjour à tous,



voilà mon problème, je souhaite faire appel à une fonction ($(".action_suppression_type_libre")) lors d'un clic sur un div (class="action_suppression_type_libre") d'une autre fonction jquery. ($(".suppressionchamps")). Cela ne fonctionne pas, je ne sais pas comment m'y prendre, j'ai essayé de nombreuses méthodes mais rien y fait, je n'arrive pas à trouver comment faire.



(en gros, je veux exécuter du jquery au clic sur un élément qui a lui même été créé via du jquery.



<script>
$(function() {

$(".suppressionchamps").click(function(){

$('#valeur1').html('<div class="action_suppression_type_libre">OUI</div>');

return false;
});


$(".action_suppression_type_libre").click(function(){
alert('test');

return false;
});
});
</script>

<div id="valeur1">
<span class="suppressionchamps">cliquer ici</span>
</div>

Merci d'avance pour votre précieuse aide !


Vincent




Share this post


Link to post
Share on other sites

Tout d'abord, $(".action_suppression_type_libre") & $(".suppressionchamps") ne sont pas des fonctions mais des sélecteurs. Ils retournent un/des pseudo(s) objet(s) jquery enrichis par rapport à ceux de JS.


Lorsque tu poses un écouteur sur ".action_suppression_type_libre" (sur l'événement clic), cet objet n'est tout simplement pas dans le DOM, donc en gros, le selecteur $(".action_suppression_type_libre") est vide. En gros ce code ne sert à rien :



$(".action_suppression_type_libre").click(function(){
alert('test');

return false;
});
});

Une façon plus correcte serait :



$(document).ready(function(){
$(".suppressionchamps").on('click', function(){
$('#valeur1').html('<div class="action_suppression_type_libre">OUI</div>');
// là il existe
$(".action_suppression_type_libre").on('click',function(){
alert('test');
return false;
});
});
});

Je ne saurais que trop te recommander de te familiariser avec DOM et JS nâtif avant de te lancer dans jQuery.


Share this post


Link to post
Share on other sites

Merci pour vos réponses.



Voici le code fonctionnel que j'ai utilisé :



$(function() {
$(".suppressionchamps").click(function(event){
$('#valeur1').html('<div class="action_suppression_type_libre">OUI</div>');
$(".action_suppression_type_libre").click(function(event){
alert('test');
return false;
});
return false;
});
});

Merci encore pour vos réponses. A bientôt.


Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Elnin
      Bonjour, je suis musicien et je commence à coder mon propre site, car il se trouve que, comme la plupart d'entre vous, j'adore coder (bref).
      En tous cas, je viens de terminer la maquette du design, et il se trouve que suis incompétent à réaliser certaines bases du site...
      Il se trouve que j'aimerais séparer (en gros) la page web en deux, avec une grande ligne diagonale. Dans un vieux tutoriel, j'avais lu qu'en Javascript, l'on pouvait dessiner tout ce qu'on voulait sur des calques avec canvas... Problème : je n'ai que quelques bases en Javascript qui ne me permettront surement pas d'atteindre mon objectif. Je sollicite donc votre aide pour m'indiquer ne serait-ce qu'un lien ou ce que j'aimerais réaliser est expliqué ou si vous connaissez certaines balises...
      Merci d'avance,
      Elnin
    • By dav3net
      Bonjour,

      Contexte : Utilisation d'un script d'annuaire en PHP MySQL avec un affichage d'une carte via API Gmaps et des coordonnées contenu dans une des table de la bd MySQL.

      Pour cela j'ai suivi le tuto google pour afficher la carte suite à une génération d'une sortie au format KML/XML par un script PHP,
      je vous laisse découvrir : https://developers.google.com/maps/articles/phpsqlajax_v3

      Le code pour l'affichage de la carte est celui-ci :
      <!DOCTYPE html > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>PHP/MySQL & Google Maps Example</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> <script type="text/javascript"> //<![CDATA[ var customIcons = { restaurant: { icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png' }, bar: { icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' } }; function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(47.6145, -122.3418), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("phpsqlajax_genxml.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "<b>" + name + "</b> <br/>" + address; var icon = customIcons[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() {} //]]> </script> </head> <body onload="load()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html> Je souhaiterais que les markers soit regroupés sous forme de clusters, j'ai trouvé la solution ici :
      https://developers.google.com/maps/a...arkerclusterer
      Les sources sur GitHUB
      et plus d'exemples https://googlemaps.github.io/js-mark.../examples.html

      Bref, en gros je pense qu'il faut intégrer le code suivant au précédent :
      var center = new google.maps.LatLng(37.4419, -122.1419);var options = {'zoom': 13,'center': center,'mapTypeId': google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById("map"), options);var markers = [];for (var i = 0; i < 100; i++) {var latLng = new google.maps.LatLng(data.photos[i].latitude,data.photos[i].longitude);var marker = new google.maps.Marker({'position': latLng});markers.push(marker);}var markerCluster = new MarkerClusterer(map, markers); Je ne maîtrise pas le JavaScript, et je n'arrive pas à compiler les deux fonctions... De l'aide serait la bienvenue.. Merci d'avance !
    • By fbern
      bonjour



      certaines pages de mon site font appel à de l'Ajax pour les avis clients sur mes disques. Google peut indexer désormais ce contenu.

      Quelle directive lui donner ? Canonical mais cela me semble abusif s'agissant que de la moitié de la page, noindex au risque d'en perdre le contenu.

      (si vous me dites de retirer l'Ajax, -), je ne peux pas avant quelques mois !)



      Merci

    • By Zlika
      Bonjour,



      Une question qui me taraude !



      J'ouvre une page qui déclenche un ajax.

      Je clique un lien qui appelle une nouvelle page alors que l'ajax s’exécute.



      Que se passe-t-il ?



      1) le processus ajax s'arrête

      2) le processus aboutit.



      Merci pour votre érudition.









×
×
  • Create New...