Question

我使用jQuery为多个表单输入添加/删除输入框。我需要为每个输入添加fancybox（iframe方法）。在行动fancybox工作的现有输入，但当我添加新的输入框fancybox不工作，而不是打开。

JS：

$(document).ready(function () {

    var MaxInputsVideo = 8; //maximum input boxes allowed
    var InputsWrapper = $("#VideoWrapper input"); //Input boxes wrapper ID
    var AddButton = "#AddMoreVideo"; //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount = 1; //to keep track of text box added

    $(AddButton).click(function (e) //on add input button click
    {
        e.preventDefault();
        InputsWrapper = $("#VideoWrapper input");
        x = InputsWrapper.length;
        console.log(x + '  ' + MaxInputsVideo);
        if (x < MaxInputsVideo) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).parents('#VideoWrapper').append('<div class="VideoRemove" style="position:relative;clear:both;"><div class="filesmap"><input type="text" name="video[]" class="form-control" id="video-' + x + '" tabindex="7"  /></div><span class="filesicon"><a class="icon-picture boxGetVideo" href="./filemanager/dialog.php?type=1&field_id=video-' + x + '">filemanager </a> </span><span><a class="removeclassVideo icon-minus fa-2x alerts-color" href="#"> remove</a></span></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click", ".removeclassVideo", function (e) { //user click on remove text
        console.log(x);
        if (x > 1) {
            $(this).parents('.VideoRemove').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    })

});

$('.boxGetVideo').fancybox({
    'width': '75%',
        'height': '90%',
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'iframe',

});

HTML：

    <div id="VideoWrapper"> <a href="#" id="AddMoreVideo" class="help-box icon-plus">add</a>

    <div class="VideoRemove" style="position:relative;clear:both;">
        <div class="filesmap">
            <input type="text" name="video[]" class="form-control" value="/video/golden.flv" id="video-0" tabindex="7" />
        </div>  <span class="filesicon">
                                            <a class="icon-picture boxGetVideo" id="btnChoiceThumbnail" href="./filemanager/dialog.php?type=1&field_id=video-0">filemanager</a>
                                            </span>
    <span><a class="removeclassVideo icon-minus fa-2x alerts-color" href="#">remove</a></span>

    </div>
    <div class="VideoRemove" style="position:relative;clear:both;">
        <div class="filesmap">
            <input type="text" name="video[]" class="form-control" value="/video/golden2.flv" id="video-1" tabindex="7" />
        </div>  <span class="filesicon">
                                            <a class="icon-picture boxGetVideo" id="btnChoiceThumbnail" href="
./filemanager/dialog.php?type=1&field_id=video-1">filemanager</a>
                                            </span>
    <span><a class="removeclassVideo icon-minus fa-2x alerts-color" href="#">remove</a></span>

    </div>
</div>

我该如何解决这个问题？

注意：我的fancybox版本是1.3.6。我需要编辑此版本的代码，而不是更新到任何2.x版本的fancybox。

JFK评论JSFIDDLE的

新演示（问题：点击添加链接，而不是点击iframe链接）

多个输入框的多个fancybox

0 个答案: