jquery - 无法在弹出式灯箱上的文本字段中输入

Question

我在 jQuery 中创建了一个显示文本输入字段的灯箱，但由于某种原因我无法在输入字段中键入内容，它会自动取消选择。如果我按住鼠标按钮并开始打字，那么它就可以工作，但是一旦我松开它，它就会删除所有文本。知道为什么会发生这种情况吗？

这是我的代码(抱歉，我知道很多，但是灯箱没有出现在 jsfiddle 中)

HTML

<div id="submitanswerbutton">
<a href="#answer-box" class="login-window"><div class="btn btn-primary">Ask a Question</a></div>
<div id="answer-box" class="answer-popup">

</div>
</div>​

CSS

 #submittextbutton{
float:right;
margin-top:5px;
margin-right:12px;
}

 #mask {
display: none;
background: #000; 
position: fixed; left: 0; top: 0; 
z-index: 10;
width: 100%; height: 100%;
opacity: 0.5;
z-index: 999;
 }

 .answer-popup{
display:none;
font-size:14px;
background: #333;
padding: 10px;     
width:250px;
height:300px;
border: 1px solid black;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #333333; /* CSS3 */
    -moz-box-shadow: 0px 0px 20px #333333; /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #333333; /* Safari, Chrome */
border-radius:13px 13px 13px 13px;
    -moz-border-radius: 13px; /* Firefox */
    -webkit-border-radius: 13px; /* Safari, Chrome */
 }

 .answer-popup a {
color:white;
font-size:14px;
text-decoration:none;
background:#333;
}    

JS

// Clicking on Ask a Question button on Answers page
$(document).ready(function() {
    $('body').on('click', '#submitanswerbutton', function(event){

                //Getting the variable's value from a link 
        var answerBox = $(this).attr('href');

        //Fade in the Popup
        $('.answer-popup').fadeIn(300);

        //Set the center alignment padding + border see css style
        var popMargTop = ($(answerBox).height() + 24) / 2; 
        var popMargLeft = ($(answerBox).width() + 24) / 2; 

        $(answerBox).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);

        return false;
    });

    // When clicking on the mask layer the popup closed    
    $('#mask').live('click', function() { 
      $('#mask , .answer-popup').fadeOut(300 , function() {
        $('#mask').remove();  

    }); 
    return false;
    });
});

// load Answers when click questions via Ajax
// load Answer when clicking question
$(document).ready(function() {
    var url;
    $('.question a').click(function(ev) {
        url = $(this).attr('href');
        $('.answers').load('http://127.0.0.1:8000'+url, function(response){
        });
    return false;
    });

    $('body').on('click', '#submitanswerbutton', function(ev) {
        var pathname = window.location.pathname;
        $('.answer-popup').load(url+'add_answer/');
    });
    return false;
});    ​

Answer 1

将#answer-box div 移到#submitanswerbutton div 之外:

<div id="submitanswerbutton">
    <a href="#answer-box" class="login-window"><div class="btn btn-primary">Ask a Question</a></div>
</div>
<div id="answer-box" class="answer-popup"></div>​

如果答案框 div 位于第一个 div 内，那么每次您单击答案框(例如将光标放入文本框)时，您最终都会调用打开另一个答案框的正文点击事件!

请参阅此工作 fiddle :http://jsfiddle.net/manishie/2vmCy/