jquery .change() ne reconnaît pas le changement!

J'ai une option select qui génère un curseur. Lorsque l'option de sélection change, le curseur change et de la même manière, dans l'autre sens.jquery .change() ne reconnaît pas le changement!

J'ai configuré une alerte au déclenchement lorsqu'une option de la sélection est modifiée. Cette alerte reconnaît et se déclenche lorsque je change l'option de la sélection, mais lorsque je la change depuis le curseur, rien ne se déclenche.

J'ai vraiment besoin de faire feu. Voici mon code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>  Demo Page: Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script> 
<script type="text/javascript" src="js/selectToUISlider.jQuery.js"></script> 
<link rel="stylesheet" href="css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" /> 
<link rel="Stylesheet" href="css/ui.slider.extras.css" type="text/css" /> 
<style type="text/css"> 
    body {font-size: 62.5%; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; } 
    fieldset { border:0; margin: 6em; height: 12em;}  
    label {font-weight: normal; float: left; margin-right: .5em; font-size: 1.1em;} 
    select {margin-right: 1em; float: left;} 
    .ui-slider {clear: both; top: 5em;} 
</style> 
<script type="text/javascript"> 
    $(function(){ 
     //demo 1 
     $("#hide_me").hide(); 
     var abc = $('select#privs').selectToUISlider().next(); 

     $('.change').change(function() { 
      alert("Ive been called"); 
     }); 
    }); 

</script> 
<script type="text/javascript"> 

</script> 

</head> 

    <body> 

<form action="#"> 
    <!-- demo 1 --> 
    <fieldset> 
     <label for="speed">Select a Level</label> 
     <select name="speed" class="change" id="privs"> 
      <option value="Read">Read</option> 
      <option value="Create">Create</option> 
      <option value="Update">Update</option> 
      <option value="Delete">Delete</option> 
     </select> 

    </fieldset> 

</form>

Source

2010-11-14 Peter

Appelez simplement le select.change dans la fonction que le curseur effectue? – Konerak

Une recherche rapide sur Google suggère la bonne façon de joindre un gestionnaire d'événements onChange pour le contrôle de curseur particulier que vous utilisez est:

var abc = $('select#privs').selectToUISlider({ 
    sliderOptions: { 
     change: function(e, ui) { 
      alert('Changed!'); 
     } 
    } 
}).next();

Source

2010-11-14 20:06:44 VoteyDisciple

Cela a fonctionné comme un charme. Je vous remercie! – Peter

Ceci est le comportement attendu, les modifications programmatiques ne déclenchent pas l'événement onchange (une boucle infinie se produirait dans de nombreux cas si c'était le cas).

Pour déclencher votre gestionnaire, lancez simplement vous-même événement change, par exemple:

$('#privs').val('Read').change();

Dans votre cas, utilisez l'événement stop du curseur, comme ceci:

var abc = $('#privs').selectToUISlider({ 
    sliderOptions: { 
     stop: function(event, ui) { 
      $('.change').change(); 
     } 
    } 
}).next();

You can try it here, Si vous avez plusieurs éléments, utilisez un .each où vous pouvez déclencher l'événement change du <select> associé au curseur sur lequel vous vous trouvez.

Source

2010-11-14 20:06:48

"les changements programmatiques ne déclenchent pas l'événement onchange" - merci beaucoup @Nick Craver –

jquery .change() ne reconnaît pas le changement!

Répondre

Questions connexes