Javascript 动态字段窗体

我正在尝试使我的表单动态化，您可以自己添加字段。 我尝试了下面的代码，但是点击不会触发任何东西，当我点击添加按钮时，什么也没有发生，有什么帮助吗

HTML

书
提交

这是我的javascript，我包含在正文的底部

    $(document).ready(function() {
    var titleValidators = {
    row: '.col-xs-4',   // The title is placed inside a <div class="col-xs-4"> element
    validators: {
    notEmpty: {
    message: 'The title is required'
    }
    }
    },
    isbnValidators = {
    row: '.col-xs-4',
    validators: {
    notEmpty: {
    message: 'The ISBN is required'
    },
    isbn: {
    message: 'The ISBN is not valid'
    }
    }
    },
    priceValidators = {
    row: '.col-xs-2',
    validators: {
    notEmpty: {
    message: 'The price is required'
    },
    numeric: {
    message: 'The price must be a numeric number'
    }
    }
    },
    bookIndex = 0;

    $('#bookForm')
    .formValidation({
    framework: 'bootstrap',
    icon: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
    'book[0].title': titleValidators,
    'book[0].isbn': isbnValidators,
    'book[0].price': priceValidators
    }
    })

    // Add button click handler
    .on('click', '.addButton', function() {
    bookIndex++;
    var $template = $('#bookTemplate'),
    $clone    = $template
    .clone()
    .removeClass('hide')
    .removeAttr('id')
    .attr('data-book-index', bookIndex)
    .insertBefore($template);

    // Update the name attributes
    $clone
    .find('[name="title"]').attr('name', 'book[' + bookIndex + '].title').end()
    .find('[name="isbn"]').attr('name', 'book[' + bookIndex + '].isbn').end()
    .find('[name="price"]').attr('name', 'book[' + bookIndex + '].price').end();

    // Add new fields
    // Note that we also pass the validator rules for new field as the third parameter
    $('#bookForm')
    .formValidation('addField', 'book[' + bookIndex + '].title', titleValidators)
    .formValidation('addField', 'book[' + bookIndex + '].isbn', isbnValidators)
    .formValidation('addField', 'book[' + bookIndex + '].price', priceValidators);
    })

    // Remove button click handler
    .on('click', '.removeButton', function() {
    var $row  = $(this).parents('.form-group'),
    index = $row.attr('data-book-index');

    // Remove fields
    $('#bookForm')
    .formValidation('removeField', $row.find('[name="book[' + index + '].title"]'))
    .formValidation('removeField', $row.find('[name="book[' + index + '].isbn"]'))
    .formValidation('removeField', $row.find('[name="book[' + index + '].price"]'));

    // Remove element containing the fields
    $row.remove();
    });
    });

$（文档）.ready（函数（）{
var滴定仪={
行：'.col-xs-4'，//标题放在元素中
验证器：{
注意：{
消息：“标题是必需的”
}
}
},
isbnValidators={
行：'.col-xs-4'，
验证器：{
注意：{
信息：“ISBN是必需的”
},
国际书号：{
消息：“ISBN无效”
}
}
},
价格验证器={
行：'.col-xs-2'，
验证器：{
注意：{
信息：“价格是必需的”
},
数字：{
消息：“价格必须是数字”
}
}
},
bookIndex=0；
$（“#书单”）
.formValidation({
框架：“bootstrap”，
图标：{
有效：“glyphicon glyphicon ok”，
无效：“glyphicon glyphicon删除”，
正在验证：“glyphicon glyphicon刷新”
},
字段：{
“书籍[0]。标题：标题栏栏，
“book[0]。isbn”：ISBNValidator，
“书籍[0]。价格”：价格验证器
}
})
//添加按钮单击处理程序
.on（'click'，'addButton'，function（）{
图书索引++；
var$template=$（“#bookTemplate”），
$clone=$template
.clone（）
.removeClass（'hide'））
.removeAttr（'id'））
.attr（'data-book-index'，bookIndex）
.insertBefore（$template）；
//更新名称属性
$clone
.find（'[name=“title”]'）.attr（'name'，'book['+bookIndex+'].title'）。end（）
.find（'[name=“isbn”]'）.attr（'name'，'book['+bookIndex+'].isbn'）。end（）
.find（'[name=“price”]'）.attr（'name'，'book['+bookIndex+'].price'）.end（）；
//添加新字段
//注意，我们还将新字段的验证器规则作为第三个参数传递
$（“#书单”）
.formValidation（'addField'，'book['+bookIndex+'].title'，titleValidators）
.formValidation（'addField'，'book['+bookIndex+'].isbn'，isbnValidators）
.formValidation（'addField'，'book['+bookIndex+'].price'，priceValidators）；
})
//删除按钮单击处理程序
.on（'click'，'removeButton'，函数（）{
var$row=$（this）.parents（'.form group'），
index=$row.attr（'data-book-index'）；
//删除字段
$（“#书单”）
.formValidation（'removeField'，$row.find（'[name=“book['+index+'].title”]'））
.formValidation（'removeField'，$row.find（'[name=“book['+index+'].isbn']））
.formValidation（'removeField'，$row.find（'[name=“book['+index+'].price”]）；
//删除包含字段的元素
$row.remove（）；
});
});

我为jQuery包含了这些库

     <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>

---

您的表单引发了一个错误：未捕获的TypeError:$（…）。formValidation不是一个函数

除了jQuery库之外，您还记得添加以下脚本吗

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<script type="text/javascript" src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>

事实上，是的，除了bootstrap.min.js之外，我有所有的表单，现在我添加了它，我没有提到我在一个模态中有表单，所以现在当我点击模态的按钮时，它只是打开然后关闭，眨眼之间，它自己就关闭了……这是jquery还是其他库冲突？因为自从我使用blad之后，我有很多这样的代码。我真的不知道，因为我试图复制你在codepen上发布的代码，并且它对我来说工作正常。也许您可以查看一下，看看您自己的代码中的差异：

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<script type="text/javascript" src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>