.live change ne fonctionne que sur modification par l'utilisateur

**bupocirk** · 08/07/2012, 09h45

Bonjour à tous,

J'utilise Jquery-ui sortable sur une liste ul.
Chaque li contient une rubrique qui récupère la position.
J'aimerais que lorsque la valeur de cette rubrique change, une action soit déclenchée automatiquement.

J'ai bidouillé un bout de code avec $('input.positionInput').live('change',function(){

Ce code fonctionne parfaitement quand on modifie manuellement la valeur de la rubrique mais pas quand la valeur est modifiée par $(this).find("input.positionInput").val(pos);

Voici tout mon code :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/script/jquery-1.7.2.min.js"></script>
<script src="/script/jquery-ui-1.8.4.custom.min"></script>
<script src="/script/jquery_ui/development-bundle/ui/jquery.ui.core.js"></script>
<script src="/script/jquery_ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="/script/jquery_ui/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="/script/jquery_ui/development-bundle/ui/jquery.ui.sortable.js"></script>
<script type='text/javascript'>
	$('.sortable').live('click',function(){
		$(".sortable").sortable({
			placeholder: "ui-state-highlight",
            update : function(event,ui){
                var list = ui.item.parent("ul");
                var pos = 0;
                $(list.find("li")).each(function(){
                    pos++;
                    $(this).find("input.positionInput").val(pos);
                });
            }
        });
		$(".sortable").disableSelection();
	} );
 
 
	$('input.positionInput').live('change',function(){
	 alert('OK ! ');
  });
 
</script>
<style>
.dupliq {border:1px solid black; list-style-type:none; padding:5px; margin:1px 0; cursor:move;}
</style>
</head>
<body>
<form>
<ul class='sortable'>
	<li class='dupliq'>
		<input class='positionInput' type='text' id='order1' name='order_1' value='0'/> Glisser / déplacer pour changer de position
	</li>
	<li class='dupliq'>
		<input class='positionInput' type='text' id='order2' name='order_2' value='0'/>
	</li>
	<li class='dupliq'>
		<input class='positionInput' type='text' id='order3' name='order_3' value='0'/>
	</li>
</ul>
</form>
</body>
</html>

J'aimerais vraiment comprendre pourquoi ca ne fonctionne pas...

Merci beaucoup pour votre aide !
Bupocirk

**Bovino** · 08/07/2012, 11h06

C'est tout à fait normal.
L'événement change correspond à une modification faite par l'utilisateur, toute modification faite par programmation ne le déclenche pas.

Il te suffit d'exécuter la fonction associée à l'événement quand tu modifies la valeur du champ par programmation.

Et au passage, la méthode .live() est dépréciée, il faut utiliser .on() à la place.

**bupocirk** · 08/07/2012, 11h37

AAAAh Merci Bovino, pour la lumière sur change() ainsi que pour .live/.on.

.live change ne fonctionne que sur modification par l'utilisateur

jQuery

Vue hybride

Discussions similaires

Partager

Partager