無法在彈出式燈箱中輸入文本字段

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

移動＃DIV answerbox的#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>​ 

如果answerbox DIV是第一DIV中，然後每次您在answerbox點擊（例如時間把光標移動到文本框中），最終調用body click事件打開另一個answerbox！

看到這個工作小提琴：http://jsfiddle.net/manishie/2vmCy/