无法在 fancybox 中编辑表单输入字段答案

【问题标题】：Can't edit form input fields inside fancybox无法在 fancybox 中编辑表单输入字段
【发布时间】：2013-04-24 09:12:57
【问题描述】：

我使用 Fancybox 来编辑实体而不重新加载整个页面。但是通过 ajax 加载表单内容后，我无法编辑输入字段。如果我单击其中一个输入，我会立即失去焦点。显示fancybox的代码很简单：

<a class="lightbox fancybox.ajax" href="/app_dev.php/devices/517781e3e707a00217000033/edit">Bearbeiten</a>

和javascript（提交表单尚未实现）

$(document).ready(function() {
    $(".lightbox").fancybox({
        minWidth : 300,
        minHeight : 150,
        openEffect : 'none',
        closeEffect : 'none'
    });
});

通过ajax返回的内容：

<form class="lightbox" action="/app_dev.php/devices/517781e3e707a00217000033/edit" method="POST">
    <fieldset id="device">
        <p>
            <label for="device_name" class="required"> device.name </label>
            <input type="text" id="device_name" name="device[name]" required="required" value="VW BUS">
        </p>
        <p>
            <label for="device_type" class="required"> device.type </label>
            <select id="device_type" name="device[type]" required="required">
                <option value="0">FME 2100</option>
                <option value="1">FME 2200</option>
                <option value="2">FME 3200</option>
            </select>
        </p>
        <p>
            <label for="device_number" class="required"> device.number </label>
            <input type="text" id="device_number" name="device[number]" required="required" value="+43xxxxxxxxx">
        </p>
        <p>
            <label for="device_imei" class="required"> device.imei </label>
            <input type="text" id="device_imei" name="device[imei]" required="required" value="xxxxxxxxxxxx">
        </p>
        <input type="hidden" id="device__token" name="device[_token]" value="xxxxxxxxxxxxxxx">
    </fieldset>
    <input type="submit" value="form.save">
</form>

如前所述，我会立即失去对输入字段的关注。选择正在工作...

我将fancybox 2.1.4 与jquery 1.9.1 一起使用

【问题讨论】：

标签： ajax forms fancybox fancybox-2

【解决方案1】：

您可以使用这个小提琴并根据语法进行更改：http://jsfiddle.net/UYHxc/2/

$.fancybox.open('#divFancyBoxTest',{
 // prevents closing when clicking INSIDE fancybox 
         openEffect  : 'none',
         closeEffect : 'none',             
         closeBtn : false,              
         helpers   : { 
          overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox 
         }
});
$('#addbtn').click(function(){
            $(".input_add").toggle(); //add input box                                 
        });

<div id="divFancyBoxTest">
     <div style=" font-size: 14px; font-weight: bold; text-align: center; margin-bottom: 17px;">Click the link in the email we have sent to</div>    
     <div style="text-align:center; margin-bottom: 17px;"><a href="logout" style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;">logout</a></div>
        <div style=" font-size: 14px; font-weight: bold; text-align: center;margin-bottom: 17px;">to complete your registration.</div>    
        <div style=" font-size: 14px; text-align: center;margin-bottom: 17px;"><span style="color: #00A8EC; font-weight: bold;padding-left: 5px;padding-right: 5px;">
                <a style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;" id="resendemail">Resend confirmation email </a>
                <span style="color:#000;">|</span>
                <a style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;" id="addbtn">Change email address</a>                
                <div class="input_add" style="margin-top: 30px;display: none;">                    
                    <input type="text" name="email" style="padding-top: 4px !important;" >
                    <button style="background-color: #00A8EC;height: 30px;box-shadow: none;border: 1px solid #00A8EC;color: #fff;">Submit</button>                    
                </div>
            </span>
            </div>        
   </div>    
    <input type="text" id="something" value="test" />
</div>

【讨论】：