No puedo escribir a las entradas

Question

Tengo una lista que se puede ordenar. Estoy usando la interfaz de usuario de jQuery con widgets, mouse, posición, complementos sortables.

CSS:

#sortable{ 
    width : 550px; 
    display: inline-block; 
} 
#sortable li, #add { 
    width : 550px; 
    margin : 5px; 
    padding : 5px; 
    height : 50px; 
} 
#sortable li img.social-icon, #sortable li img.drag-cursor { 
    width: 40px; 
    height : 40px; 
    float : left; 
} 
#sortable li img.social-icon { 
    margin-right : 5px; 
} 
#sortable li img.drag-cursor { 
    margin-left : 5px; 
    cursor : move; 
} 
#sortable li input { 
    height:40px; 
    width:450px; 
    line-height: 45px; 
    float:left; 
} 
#add { 
    cursor : pointer; 
    text-align: center; 
    line-height: 45px; 
} 
.ui-state-highlight { height: 50px; line-height: 50px; } 

HTML:

<div id="dash-wrapper"> 
    <ul id="sortable"> 
     <li class="ui-state-default"> 
      <img src="images/social/twitter.png" class="social-icon" /> 
      <input type="text" value="textt" name="user-media-link[]" class="user-media-link"> 
      <input type="hidden" name="social-media-type" value="1"> 
      <img src="images/drag.png" class="drag-cursor"> 
     </li> 
     <li class="ui-state-default"> 
      <img src="images/social/facebook.png" class="social-icon" /> 
      <input type="text" value="textt" name="user-media-link[]"> 
      <input type="hidden" name="social-media-type" value="1"> 
      <img src="images/drag.png" class="drag-cursor"> 
     </li> 
     <li class="ui-state-default"> 
      <img src="images/social/rss.png" class="social-icon" /> 
      <input type="text" value="textt" name="user-media-link[]"> 
      <input type="hidden" name="social-media-type" value="1"> 
      <img src="images/drag.png" class="drag-cursor"> 
     </li> 
    </ul> 
    <div class="ui-state-default" onCLick="addNewSocial(); return false;" id="add">ADD</div> 
</div> 

Guión:

$(function() { 
    $("#sortable").sortable({ 
     placeholder: "ui-state-highlight" 
    }); 
    $("#sortable").disableSelection(); 
}); 

function addNewSocial() { 
    $("#sortable").append('<li class="ui-state-default"><img src="" width="100" height="100" /> <input type="text" value="textt" name="user-media-link[]"><input type="hidden" name="social-media-type" value="1"></li>'); 
} 

que está funcionando muy bien, pero no puedo escribir nada a las entradas. Puedo alcanzarlos solo a través del botón TAB. Cuando hago clic en ellos, no pasa nada. Puede ver un live example.

Me leeron todas las preguntas que contenían esta pregunta, pero no pude encontrar la respuesta correcta.

W3 Validation is OK 
There isn't any error on Firebug 
Operation System : Ubuntu 11.04 
Browser : Firefox

Answer 1

Esto ocurre porque tiene $("#sortable").disableSelection();. Quítalo y funcionará bien.

http://jsfiddle.net/KbBnu/1/

Answer 2

Si le gustaría evitar la selección de texto, pero seguir utilizando las entradas al mismo tiempo, usted debe probar este

$('body *').not(':has(input)').not('input').disableSelection(); 

Answer 3

Just Do:

$("#sortable_container_id input").click(function() { $(this).focus(); }); 

y reemplazar sortable_container_id con la identificación del elemento que es el contenedor de todos los elementos "clasificables".