Question

我有 bootstrap模式框按钮，其中包含动态添加字段按钮。当我点击添加更多按钮时，JavaScript不适用于显示的字段。

以下是我的代码：

的index.php

<a href="new_user_popup.php" style="color:white" target="_blank" data-toggle="modal" data-target="#myModal">
    <button type="button" class="btn btn-info new_entry_btn" style="margin-left:0%">
        New Entry
    </button>
</a>

<script type="text/javascript">
    $(function() {
        $('#trigger').click(function() {
            $('#myModal').modal('show');
            return false;
        })
    });

    $('#myModal').on('shown.bs.modal', function () {
        $(this).find('.modal-dialog').css({width:'auto',
                                           height:'auto', 
                                           'max-height':'100%'
        });
    });
</script>

<div class="container">
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Content will be loaded here from "remote.php" file -->
            </div>
        </div>
    </div>
</div>

new_user_popup.php

<div class="col-md-8 col-sm-12 col-24">
    <div class="input_fields" style="color:black">
        <button class="add_field  btn " onclick="incrementValue()" style="margin-left: 443px;">Add</button>
    <div>
        <input type="text" name="mytextt[]" hidden="" ></div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var max_fields      = 10; //maximum input boxes allowed
        var wrapper         = $(".input_fields"); //Fields wrapper
        var add_button      = $(".add_field"); //Add button ID

        var wrapper_pre1         = $(".present_fields_1"); //Fields wrapper
        var x = 1; //initlal text box count

        $(add_button).click(function(e) { //on add input button click
            e.preventDefault();

            if (x < max_fields) { //max input box allowed
                x++; //text box incrementa

            $('<div style="margin-left:50%;"><div class="form-group"><label class="control-label" for="selectbasic" style="margin-left:-220px;">Type of work</label><div class="col-md-6"><select id="type_of_work[]" name="type_of_work[]" class="form-control" style="margin-left:17%;width:222%"><option value="Option one">Audit Report</option><option value="Option two">ITR filing</option><option value="Option three">VAT Filing</option><option value="Option four">Accounting</option><option value="Option five">Registration</option><option value="Option six">Certification</option><option value="Option seven">Others</option></select></div></div><div class="form-group"> <label class="col-md-4 control-label" for="selectbasic" style="margin-left:-29%">Status</label><div class="col-md-6"><select id="status11' + x + '" name="status[]" style="width:210%;margin-left:-1%;" class="form-control"><option value="Pending">Pending</option><option value="Work in process">Work in process</option><option value="Completed">Completed</option></select></div></div><div class="form-group row"><label for="example-date-input" class="col-2 col-form-label" style="margin-left:-15.5%;";">DATE</label><div class="col-8"><input class="form-control datepicker pick" id="datee' + x + '" name="date[]" value="<?php echo $_POST['date'] ?>" style="width:86%;margin-left:10.6%;margin-top:-10%;" type="text" readonly></div></div><div class="form-group"><label class="col-md-4 control-label" for="textinput" style="margin-left:-36%">Comment</label><div class="col-md-4"><input id="comments11' + x + '" name="comment[]" type="text" placeholder="" class="form-control input-md" style="width:342%;margin-left:20%"></div></div></center><a href="#" class="remove_field" style="margin-left: 197px; margin-top: -40px;position:absolute"><img src="images/del24.png"></a></a></div>').insertBefore(add_button) //add input box        
                var newInput=$("#datee"+ x).datepicker({dateFormat: 'dd/mm/yy'});

                newInput.datepicker({dateFormat: 'dd/mm/yy'}).datepicker("setDate", new Date());
                $("#status11" + x).click(function () {
                    if ($("#status11" + x).val() == "Completed") {
                        $("#comments11" + x).attr("required", "required");
                    }
                    else
                        $("#comments11" + x).attr("required", false);
                });
            }
        });

        $(wrapper).on("click",".remove_field", function(e) { //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })

        $(wrapper_pre1).on("click",".remove_field_pre1", function(e) { //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });
</script>

Answer 1

问题是，你可以在动态添加的DOM元素上使用on()。

$(add_button).on('click', function (e) {

Answer 2

如Peter所说，你应该在动态添加的DOM元素上使用on（）。我假设你需要在你的（＃status11＆amp;＃comments11）选择器上执行JS？

$("#status11" + x).on('click', function () {

而不是：

$("#status11" + x).click(function () {

Answer 3

您可以使用on功能将您的事件监听器保留在新字段上，您只需更改其编写方式。

而不是像这样的函数：

$('.my-field').on('click', function() {});

使用父元素来监视特定的子元素，如下所示：

$('.parent-container').on('click', '.my-field', function() {});

Answer 4

当您在.modal-content div中使用ajax加载html内容时，必须使用

$(document).ajaxComplete(function() {
 // do your .click which is interacting with the html in the dynamic loaded div 
});

而不是$（文件）.ready

验证不适用于动态添加的字段吗？

4 个答案: