bouton désactivé avec jquery mobile

J'ai ce code (doc):bouton désactivé avec jquery mobile

<!DOCTYPE html> 
<html> 
<head> 
    <title>123</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 

</head> 

<body> 

<form> 
    <input type="text" name="comment" id="comment" placeholder="Comment" maxlength="140" value=""> 
    <div id="charactersLeft"></div> 
    <input type="submit" id="commentButton" data-icon="edit" data-inline="true" data-mini="true" data-theme="b" value="Send" disabled="disabled"> 
</form> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<script src="http://zurb.com/playground/javascripts/plugins/jquery.textchange.min.js"></script> 

<script> 


$(document).ready(function(){ 

$('#comment').bind('hastext', function() { 
    $('#commentButton').removeAttr('disabled'); 
}); 

$('#comment').bind('notext', function() { 
    $('#commentButton').attr('disabled', 'disabled'); 
}); 

$('#comment').bind('textchange', function (event, previousText) { 
    $('#charactersLeft').html(140 - parseInt($(this).val().length)); 
}); 

}); 

</script> 
</body> 
</html>

Si je supprimé css, cela fonctionne.

Dans la console Chrome:

$('#commentButton'); 

<input type="submit" id="commentButton" data-icon="edit" data-inline="true" data-theme="b" value="Отправить" disabled="disabled" class="ui-btn-hidden" data-disabled="true">

Il est très étrange, car en html je n'ai pas class="ui-btn-hidden". Donc, je peux faire quelques changements dans <script>:

$('#comment').bind('hastext', function() { 
    $('#commentButton').removeClass('ui-btn-hidden').removeAttr('disabled'); 

});

Et apears puis sur le bouton +1! On dirait "conflit de styles", car sans css tout fonctionne!

Comment résoudre ce problème? Merci.

Source

2013-07-20 tim

pouvez-vous fournir un violon pour cela. – vipulsharma

http://jsfiddle.net/kfDHh/ essayez d'écrire quelque chose dans le formulaire, puis supprimez CSS et essayez à nouveau – tim

Vous devez utiliser jQuery Mobile pour activer/désactiver les boutons

$('#comment').bind('hastext', function() { 
    $('#commentButton').button('enable'); 
}); 

$('#comment').bind('notext', function() { 
    $('#commentButton').button('disable'); 
});

Source

2013-07-20 19:24:24

ne fonctionne pas. entrée - ce n'est pas un bouton, non?) – tim

Fonctionne ici http://jsfiddle.net/kfDHh/2/. De la docs: "jQuery Mobile convertit automatiquement n'importe quel bouton ou élément d'entrée avec un type de soumettre, réinitialiser, ou un bouton dans un bouton de style personnalisé" –

merci. tu m'aides beaucoup – tim

bouton désactivé avec jquery mobile

Répondre

Questions connexes