Fonction click s'exécutant plusieurs fois

**hublot78** · 17/05/2019, 10h05

Bonjour,
Je suis en train de développer une extension qui a pour but d'appeler des numéros de téléphones présents sur une page web. Pour cela avant de passer l'appel je dois me connecter et sélectionner un compte SIP via mon extension. Donc quand je lance mon extension et à la première sélection du compte SIP l'appel téléphonique ne se fait qu'une seule fois donc c'est bon mais si choisis de sélectionner un autre compte SIP, l'appel se fait deux fois alors que je n'ai cliqué qu'une seule fois sur le numéro et ainsi de suite suivant le nombre de fois où je sélectionne un compte SIP.

Voici ce que je fais quand je sélectionne mon compte SIP et que j'appuie sur un bouton pour valider

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('#valider2').click(function(){
	if (document.formulaire.sip.value == 0) {
        alert("choisissez un compte sip");
	} else {
		var dselect = document.getElementById('tonSelect');
        // récupération de la valeur sélectionné
        valeur = dselect.options[dselect.selectedIndex].text;
		localStorage.setItem("sipSelectionne", valeur);
		chrome.tabs.executeScript(null, {
			code: 'var token = "' + localStorage.getItem('token') + '";var sip = "' + valeur + '";'
		},function() {
			chrome.tabs.executeScript(null, {file: 'appel.js'});
		});
	    document.location.href = "parametres.html";
	}
});

et voici comment je passe l'appel:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
var numeroTelephone = new RegExp('0\\d{9}|0\\d[.](\\d{2}[.]){3}\\d{2}|0\\d[ ]?(\\d{2}[ ]?){3}\\d{2}|0(\\d[ ]?){9}', 'g');
var trouve;
trouve = htmlString.match(numeroTelephone);
console.log(htmlString);
var j = 0;
if (trouve != null) {
	for (var i = 0; i < trouve.length; i++) {
		console.log(trouve[i]);
		if (!htmlString.includes("<a class=\"numTel\">" + trouve[i] + "</a>")) {
			document.getElementsByTagName('body')[0].innerHTML = document.getElementsByTagName('body')[0].innerHTML.replace(trouve[i],"<a class=numTel>" + trouve[i] + "</a>");
		}
	}
}
 
$('.numTel').click(function(){
		alert("ca clique");
 
		var numTel = document.getElementsByClassName('numTel')[$('.numTel').index(this)].innerHTML;
		numTel = numTel.replace(/ |[.]/g,"");
		localStorage.setItem("numTel", numTel);
		alert(numTel);
 
		const params = {
			"sipExtension": sip,
			"calledNum" : numTel
		}
 
		var xhr = new XMLHttpRequest();
		xhr.open('POST', 'https://extranet.occicom.fr/api/voip/v1/calls/' + sip + '/makeCall', true);
		xhr.setRequestHeader('Authorization', token);
		xhr.setRequestHeader('accept', 'application/json');
		xhr.setRequestHeader('Content-type', 'application/json');
		xhr.send(JSON.stringify(params));
});

Merci d'avance pour toute l'aide que vous pourrez m'apporter.

**SpaceFrog** · 17/05/2019, 11h58

Un souci de propagation du click ?
Mais tu ne nous montre pas le html ...

**hublot78** · 17/05/2019, 12h42

Sûrement oui mais je vois pas pourquoi il apparaît

Voici le

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!doctype html>
<html>
 
<head>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" href="css/extranet.css"/>
	<title>Login Extranet</title>
 
</head>
 
<body>
    <div class="container-fluid">
	    <br/><br/>
	    <div class="row">
		    <div class="col-xs-12 centrer" >
				<p>
				<a href="https://www.occicom.fr" id="site">Site</a> | <a href="http://extranet.occicom.fr/index.php/component/facturation/?controller=client&task=lister_tarifs&Itemid=957&a=C&t=2" id="tarif">Tarif international</a> | <a href="">Connexion</a> | <a href="http://extranet.occicom.fr/index.php/component/users/?view=reset&Itemid=101" id="mdpperdu">Mot de passe perdu?</a> 
				</p>
			</div>
		</div>
	    <br/>
		<div id="couleur">
			<div class="row">
				<div class="col-md-3">
					<img src="images/logoOccicom.png" alt="logo d'Occicom" class="image"/>
				</div>
			</div>
			<br/>
 
				<div class="row">
					<div class="col-xs-12 centrer" >
						<input type="text" placeholder="login" id="login" />
					</div>
				</div>
				<br/>
				<div class="row">
					<div class="col-xs-12 centrer">
						<input type="password" placeholder="OTP" id="otp" />
					</div>
				</div>
				<br/>
				<div class="row">
					<div class="col-xs-12 centrer">
						<input type="submit" value="Connexion" id="connexion"/>
					</div>
				</div>
				<br/>
				<br/>			
 
		</div>
	</div>
	<script src="jquery.js"></script>
	<script type="text/javascript" src="extranet2.js"></script>
    <script type="text/javascript" src="extranet.js"></script>
	<!-- <script type="text/javascript" src="appel.js"></script> -->
 
</body>
 
</html>

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!doctype html>
<html>
 
<head>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" href="css/extranet.css"/>
	<title>Parametres Extranet</title>
 
</head>
 
<body">
    <div class="container-fluid">
 
	    <br/><br/>
 
		<div id="couleur">
 
		    <div class="row">
				<div class="col-md-3">
					<img src="images/logoOccicom.png" alt="logo d'Occicom" class="image"/>
				</div>
			</div>
 
			<br/>
 
			<div class="row centrer">
				<div class="col-xs-12">
					<h1>Parametres</h1>
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-6">
				    <label>busyMaxCalls:</label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4">
				    <input type="text" placeholder="entier" class="param" />
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-4">
				    <label>unconditional: </label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4 centrer">
				    <input type="text" placeholder="true ou false" class="param" />
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-6">
				    <label>unconditionalNum: </label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4 centrer">
				    <input type="text" placeholder="numero de telephone" class="param" />
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-6">
				    <label>unconditionalNumInternal: </label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4 centrer">
				    <input type="text" placeholder="true ou false" class="param" />
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-6">
				    <label>noAnswer: </label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4 centrer">
				    <input type="text" placeholder="true ou false" class="param" />
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-6">
				    <label>noAnswerNum: </label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4 centrer">
				    <input type="text" placeholder="numero de telephone" class="param" />
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-6">
				    <label>noAnswerNumInternal: </label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4 centrer">
				    <input type="text" placeholder="true ou false" class="param" />
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-6">
				    <label>noAnswerTimer: </label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4 centrer">
				    <input type="text" placeholder="entier" class="param" />
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-6">
				    <label>busy: </label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4 centrer">
				    <input type="text" placeholder="true ou false" class="param" />
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-6">
				    <label>busyNum: </label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4 centrer">
				    <input type="text" placeholder="numero de telephone" class="param" />
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-6">
				    <label>busyNumInternal: </label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4 centrer">
				    <input type="text" placeholder="true ou false" class="param" />
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-6">
				    <label>unavailable: </label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4 centrer">
				    <input type="text" placeholder="true ou false" class="param" />
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-6">
				    <label>unavailableNum: </label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4 centrer">
				    <input type="text" placeholder="numero de telephone" class="param" />
				</div>
			</div>
 
			<div class="row">
			    <div class="col-xs-6">
				    <label>unavailableNumInternal: </label>
				</div>
			</div>
			<div class="row">
			    <div class="col-xs-4 centrer">
				    <input type="text" placeholder="true ou false" class="param" />
				</div>
			</div>
 
			<br/>
			<div class="row">
				<div class="col-xs-12 centrer">
					<input type="submit" value="Valider" id="valider"/>
				</div>
			</div>
			<br/>
			<br/>
 
		</div>
 
	</div>
 
	<script src="jquery.js"></script>
	<script type="text/javascript" src="parametre.js"></script>
    <script type="text/javascript" src="extranet.js"></script>
	<!-- <script type="text/javascript" src="appel.js"></script> -->
 
</body>
 
</html>

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!doctype html>
<html>
 
<head>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" href="css/extranet.css"/>
	<title>Compte SIP</title>
 
</head>
 
<body>
    <div class="container-fluid">
	    <br/><br/>
	    <div class="row">
		    <div class="col-xs-12 centrer" >
				<h1>Selectionner un compte SIP</h1> 
			</div>
		</div>
 
		<div id="couleur">
			<div class="row">
				<div class="col-md-3">
					<img src="images/logoOccicom.png" alt="logo d'Occicom" class="image"/>
				</div>
			</div>
			<br/>
 
			<div class="row">
				<div class="col-xs-12 centrer" >
				    <form name="formulaire">
						<select name="sip" id="tonSelect">
						    <option selected value="0">Selectionner un compte SIP</option>
 
						</select>
					</form>
				</div>
			</div>
			<br/>
			<div class="row">
				<div class="col-xs-12 centrer">
					<input type="submit" value="Valider" id="valider2"/>
				</div>
			</div>
			<br/>
			<br/>			
 
		</div>
	</div>
    <script src="jquery.js"></script>
    <script type="text/javascript" src="extranet.js"></script>
	<script type="text/javascript" src="sip.js"></script>
 
</body>
 
</html>

**SpaceFrog** · 17/05/2019, 13h46

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit" value="Valider" id="valider2"/>

input type submit :
tu n'empeches pas le formulaire d'être soumis lors du click ...

cf. preventDefault()

ou modifie le en input type button

**hublot78** · 17/05/2019, 13h58

J'ai essayé mais ça ne marche pas.
Je ne pense pas que ça aurait pu être le problème car quand je sélectionne pour la première fois un compte SIP ça ne lance qu'un appel lors du clic (donc ça fonctionne correctement), c'est à partir de la deuxième sélection qu'il passe plusieurs appels en un clic.

**NoSmoking** · 17/05/2019, 15h25

Bonjour,
à chaque fois que tu exécutes ton script il affecte l’évènement aux différents éléments.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.numTel').click(function()

Nota :
cela me pique toujours les yeux lorsque je vois du JavaScript « vanilla » dans du code jQuery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$('.numTel').click(function(){
    var numTel = document.getElementsByClassName('numTel')[$('.numTel').index(this)].innerHTML;

**Watilin** · 17/05/2019, 17h36

Moi il y a ceci qui me dérange :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$('#valider2').click(function () {
  …
  chrome.tabs.executeScript( ... );
  document.location.href = "parametres.html";
  …
});

La page "parametres.html" est chargée avant que la fonction de rappel de executeScript() n’ait pu être appelée.

D’ailleurs il y a d’autres problèmes rien que dans ce premier script :

valeur n’est pas déclarée. Si le script marche malgré ça, ça veut dire que tu n’utilises pas le mode strict, et c’est pas bien ;
la propriété .text n’existe pas dans dselect.options[dselect.selectedIndex].text – c’est soit .value, soit .textContent ;
on n’est pas censés utiliser localStorage dans une extension, et ça je t’en ai déjà parlé.

Et sinon, je te propose une expression rationnelle plus simple : /0\d([\s.]?)\d{2}(?:\1\d{2}){3}/g.

Fonction click s'exécutant plusieurs fois

JavaScript

Vue hybride

Discussions similaires

Partager

Partager