Changer l'URL d'un fichier JS vers lequel pointe un élément HTML via un évènement

Bonjour à tous et à toutes,

J'espère que l'intitulé de ce poste est clair. Si ça n'est pas le cas, voici de plus amples explications :
J'ai une page HTML. Sur cette page, j'ai ce bouton Pièce jointe 646831 dont voici le code HTML :

Code:

1
2
3
<a id="add-wishlist-selection" class="btn btn-link btn-lg text-primary pr-2 wishlist-save" data-toggle="tooltip" title="" data-wishlist-id="-1" data-original-title="Ajouter ces résultats à une liste d'envies">
    <i class="wishlist-save-icon-plus wishlist-save-icon-new fas fa fa-bars fa-2x mt-n1"></i>
</a>

Une cliente voulait qu'on remplace ce bouton Pièce jointe 646831 par celui-ci Pièce jointe 646833

Comme je n'ai pas la main pour modifier le HTML, j'ai donc écrit ce petit script qui ajoute la classe fa-heart :

Code:

$('.dp-opac .catalog-page-content .section-catalog #add-wishlist-selection i.fa').addClass("fa-heart");

Ça fonctionne bien dans le sens où une fois la page chargée, le script est exécuté.

Problème :
Quand je clique sur le bouton, le bouton change légèrement de forme, c'est à dire qu'au lieu d'avoir un petit plus en bas à droite, ça met un petit moins Pièce jointe 646836 sans recharger la page et donc exécuter le script qui change le bouton en coeur

En effet, quand je regarde le DOM, il y a plusieurs évènements sur le bouton a
Pièce jointe 646837
(désolé je dois flouter pour des raisons de confidentialité)

Et effectivement, sur le premier évènement, au clic, j'ai ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
$(document).on('click', '.wishlist-save', function (e) {
    var wishlist_id = $(this).attr('data-wishlist-id');
    var record_ids = $('.wish-like, .wish-like-button').map(function () {
      return $(this).attr('record_id');
    }).get();
 
 
    $('.wish-like[data-wishlist-id!="' + wishlist_id + '"]').each(function () {
      $(this).find('i.fa').removeClass('far fa-square fa-check-square fa-trash fa-plus').addClass('fa-spinner-third fa-spin fas');
    });
 
    $('.wish-like-button[data-wishlist-id!="' + wishlist_id + '"]').each(function () {
      $(this).find('i.fa').removeClass('far fa-square fa-check-square fa-trash fa-plus').addClass('fa-spinner-third fa-spin fas');
    });
 
    $('.wishlist-save[data-wishlist-id!="' + wishlist_id + '"]').each(function () {
      $(this).find('i.fa').removeClass('far fa-square fa-check-square fa-trash fa-plus wishlist-save-icon-plus wishlist-save-icon-new').addClass('fa-spinner-third fa-spin fas');
    });
 
    $.ajax({
      url: Application.baseUrl() + '/opac/wishlist/like',
      type: "post",
      data: {
        wishlist_id: wishlist_id,
        record_ids: record_ids,
      },
      success: function (result) {
        if (result !== '0') {
 
          $.each(jQuery.parseJSON(result), function (index, value) {
 
            var allGood = true;
 
            $('.wish-like[record_id="' + index + '"]').each(function () {
              if ($(this).attr('record_id') === index && value === 1) {
                $(this).addClass('wish-unlike');
                $(this).removeClass('wish-like');
                $(this).attr('title', 'Retirer de ma liste');
                $(this).html('<i class="fa fas fa-trash fa-fw my-0 mx-3"></i><span class="fs-09 wish-text">Retirer de ma liste</span>');
              } else {
                allGood = false;
                $.notify({
                  icon: 'fas fa fa-exclamation-triangle',
                  message: "Impossible de sauvegarder cette notice !"
                }, {
                  type: 'custom',
                  newest_on_top: true,
                  delay: 1000
                });
              }
            });
 
            $('.wish-like-button[record_id="' + index + '"][data-wishlist-id="' + wishlist_id + '"]').each(function () {
              if ($(this).attr('record_id') === index && value === 1) {
                $(this).attr('class', 'wish-unlike-button');
                $(this).find('i.fa').attr('class', 'fa fas fa-check-square');
              } else {
                allGood = false;
                $.notify({
                  icon: 'fas fa fa-exclamation-triangle',
                  message: "Impossible de sauvegarder cette notice !"
                }, {
                  type: 'custom',
                  newest_on_top: true,
                  delay: 1000
                });
              }
            });
 
            if (allGood) {
              $('.wishlist-save[data-wishlist-id="' + wishlist_id + '"]').each(function () {
                $(this).addClass('wishlist-unsave').removeClass('wishlist-save');
                $(this).find('i.fa').attr('class', 'fa fas fa-check-square');
              });
 
              $('#add-wishlist-selection').find('i.fa').attr('class', 'wishlist-save-icon-minus wishlist-save-icon-new fas fa fa-bars fa-2x mt-n1');
            }
          });
 
          $('.fa.fa-spinner-third.fa-spin.fas').attr('class', 'fa far fa-square');
 
          $.notify({
            icon: 'fas fa fa-plus-circle',
            message: "Ces documents ont été ajoutés à votre liste d'envies"
          }, {
            type: 'custom',
            newest_on_top: true,
            delay: 1000
          });
 
        } else {
          $.notify({
            icon: 'fas fa fa-times-circle-o',
            message: "Impossible d'ajouter ces documents à votre liste d'envies"
          }, {
            type: 'warning',
            newest_on_top: true,
            delay: 1000
          });
        }
      }
    });
  });

Et effectivement, à un moment, en ligne 76 on voit cette ligne :

Code:

$('#add-wishlist-selection').find('i.fa').attr('class', 'wishlist-save-icon-minus wishlist-save-icon-new fas fa fa-bars fa-2x mt-n1');

J'ai donc :
1. Téléchargé le fichier catalog.js appelé au clic sur le bouton a
2. Modifié la ligne en question, en ajoutant fa-heart ce qui donne :

Code:

$('#add-wishlist-selection').find('i.fa').attr('class', 'wishlist-save-icon-minus wishlist-save-icon-new fas fa fa-bars fa-2x mt-n1 fa-heart');

3. Enregistré le fichier et l'ai renvoyé sur le serveur dans un autre dossier que celui d'origine (je n'ai pas la main sur le dossier d'origine, commun aux sites de tous nos clients, et c'est tant mieux parce que je ne veux pas intervenir sur tous nos sites, mais juste celui-ci)

Comme ce fichier catalog.js est appelé dans la page HTML, j'ai écrit un script pour remplacer l'URL du fichier d'origine par ma version :

Code:

1
2
3
4
5
6
7
$(document).ready(function(){
    $('script[src="/vendors/xxxxxx/opac/js/catalog.js"]').each(function(){
        var oldUrl = $(this).attr("src");
        var newUrl = oldUrl.replace("/vendors/xxxxxx/opac/js/catalog.js", "https://nom-domaine-site-cliente.fr/data/nom-domaine-site-cliente.fr/application/layout/public/pageperso/catalog.js"); 
        $(this).attr("src", newUrl);
    });
});

Là encore, ça fonctionne bien, ça remplace bien l'URL du script dans le DOM.

Cependant, j'ai toujours mon problème. En effet, à l'évènement Click sur le bouton a, ça continue de pointer vers l'ancienne URL (la version originale du fichier JS).
Ma question est : comment faire pour que ça pointe maintenant vers le fichier que j'ai modifié ?
Sinon, autre solution : comment faire pour, qu'au clic sur le bouton a, la classe fa-heart soit ajoutée à l'icône, enfant du bouton a ?

J'espère que mes (longues) explications sont plus claires :mouarf:

Merci en tout cas, par avance, pour votre réponse.

Bonne journée ;)