我无法输入内容

Question

我有一个可以排序的列表。我正在使用带有小部件、鼠标、位置、可排序插件的 jQuery UI。

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>

脚本：

$(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>');
}

它工作得很好，但我无法在输入中输入任何内容。我只能通过 TAB 按钮联系他们。当我点击它们时，什么也没有发生。您可以查看实时示例。

我阅读了与这个问题相关的所有问题，但我找不到正确的答案。

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

Answer 1

发生这种情况是因为您有 $("#sortable").disableSelection();。将其删除即可正常工作。

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

Answer 2

如果想阻止文本选择但同时继续使用输入，您应该尝试此操作

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

Answer 3

只需执行以下操作：

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

并将 sortable_container_id 替换为所有“可排序”元素的容器的元素的 id。