J'utilise la fonction JQuery .load pour extraire certains paragraphes de 3 URL distinctes en 3 divisions distinctes sur ma page principale. Ensuite, je veux utiliser JQuery pour ajouter des fonctions à chacune des 3 divisions de la page principale.

Voici une version (très) simplifiée de ce que j'ai maintenant:

Page 1 :

<div class="mycontent">
<P> test </p>
</div>

Page 2:

<div class="mycontent">
<p> test </p>
</div>

Page 3:

<div class="mycontent">
<p> test </p>
</div>

Balisage de la page principale:

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

Page principale JQuery:

$(document).ready(function(){

$(".div1").load("myurlA.aspx .mycontent p", function(){
$(".div1 p").wrapAll("<div class='x'></div>");
});

$(".div2").load("myurlB.aspx .mycontent p", function(){
$(".div2 p").wrapAll("<div class='x'></div>");
});

$(".div3").load("myurlC.aspx .mycontent p", function(){
$(".div3 p").wrapAll("<div class='x'></div>");
});

});

Cela fonctionne ... mais j'aimerais utiliser un seul .wrapAll pour encapsuler tous les paragraphes dans les 3 divisions. Ma page principale actuelle contient beaucoup plus de méthodes dans chaque fonction .load, et il ne semble tout simplement pas idéal de répéter les mêmes méthodes. J'ai essayé de déclencher mes méthodes après l'événement .load, mais je ne peux pas les faire fonctionner à moins qu'elles ne soient dans la fonction .load.

Toute aide serait appréciée. Je vous remercie.

0
Rob Ot 8 août 2016 à 23:30

3 réponses

Meilleure réponse

Le code ci-dessous est plus dynamique, et il encapsule chaque div lorsque son script est chargé.

$(".div-link").each(function() {
  var current = $(this);
  var link = current.data("link");
  
  current.load(link + " .mycontent p", function() {
    $(this).children("p").wrapAll("<div class='x'></div>");
    console.log('loaded')
  });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-link" data-link="myurlA.aspx"></div>
<div class="div-link" data-link="myurlB.aspx"></div>
<div class="div-link" data-link="myurlC.aspx"></div>
0
Bamieh 8 août 2016 à 20:45

Utilisez jQuery.when:

$(document).ready(function() {
  $.when(
    $(".div1").load("myurlA.aspx .mycontent p")
    $(".div2").load("myurlB.aspx .mycontent p")
    $(".div3").load("myurlC.aspx .mycontent p")
  ).then(function() {
    $("div p").wrap("<div class='x'></div>")
  });
});
0
Michał Perłakowski 8 août 2016 à 20:38

EDIT: Voici ce qui a fini par fonctionner pour moi:

$(".div1").load("myurlA.aspx .mycontent p", myFunction);
$(".div2").load("myurlB.aspx .mycontent p", myFunction);
$(".div3").load("myurlC.aspx .mycontent p", myFunction);

function myFunction(){

//shared methods & events//

};
0
Rob Ot 9 août 2016 à 21:41