Question

我已经实现了扩展表单功能。我试图在克隆形式中运行另一个javascript函数，但它不起作用。

如果引导js运行，当用户选择无线电时，无线电文本将像data-complete-text属性一样发生变化。

当脚本没有以克隆形式放置时，脚本就像魅力一样。

bootstrap js fyi
$（）。button（字符串）：http://getbootstrap.com/javascript/#buttons

这是我正在尝试运行的bootstrap js的扩展表单HTML（在下面的代码中标记）：

<span id="readroot" style="display: none">
<input class="btn btn-default" type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<div class="row">
    <div class="col-lg-3">
        <div class="" data-toggle="buttons">
            <label><?php echo __('Gender'); ?></label><br>
            <input type="hidden" name="gender" id="PostGender_" value="">
            <label class="btn btn-default" id="male" data-complete-text="<?php echo __('Male Selected'); ?>">
                <input type="radio" name="gender" id="PostGender0" value="0" autocomplete="off"/> <?php echo __('Male'); ?>
            </label>
            <label class="btn btn-default" id="female" data-complete-text="<?php echo __('Female Selected'); ?>">               
                <input type="radio" name="gender" id="PostGender1" value="1" autocomplete="off"/> <?php echo __('Female'); ?>
            </label>
        </div>  
        <script> <!-- bootstrap js -->
            $('#male1, #female1').click(function () {
                $(this).button('complete') 
            });
            $('#male1').click(function () {
                $('#female1').button('reset') 
            });
            $('#female1').click(function () {
                $('#male1').button('reset')
            }); 
        </script>               
    </div>  
</div>
</span>
<span id="writeroot"></span>        
<input class="btn btn-default" type="button" onclick="moreFields()" value="Give me more fields!" />

Javascript：

var counter = 1;
function moreFields() {
    counter++;
    var newField = document.getElementById('readroot').cloneNode(true);
    newField.id = '';
    newField.style.display = 'block';
    var newFields = newField.querySelectorAll('[name]');
        for (var i=0;i<newFields.length;i++) {
            var theNames = newFields[i].name
            if (theNames)
                newFields[i].name = "data[Student][" + counter + "][" + theNames + "]";
                //console.log(newFields[i].name);
    }
    var newFields2 = newField.querySelectorAll('[id]');
        for (var i=0;i<newFields2.length;i++) {
            var theNames2 = newFields2[i].id;
            if (theNames2)
                newFields2[i].id = theNames2 + counter;
                //console.log(newFields2[i].id);

    }       
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newField,insertHere);
}

我已经从控制台检查过，字段ID被命名为'male1'，'female1'，就像我想要的那样。 bootstrap js应该找到带有相应id的标签。

P.S。接下来的问题是使js参数增加，因此当克隆表格时，它将像male1，male2，male3。但这超出了这个问题的范围。

在克隆的表单中运行Javascript

0 个答案: