laravel 由JS动态生成的HTML代码未执行交互

zwghvu4y  于 2023-02-05  发布在  其他
关注(0)|答案(1)|浏览(94)

我有一个表单向导，我试图动态添加select标签，我添加了一个click-to-add按钮来生成HTML代码片段，但是css样式和select-2不适用于js click事件生成的代码，并且动态代码的附加事件在被点击时也不会触发。
我试过重新排列js文件，但不明白为什么它仍然不工作。
在我下面的laravel代码片段中，我把js实现直接放在jquery下面，因为它是用jquery实现的，但是它仍然不工作。

@section('scripts')
<!-- BEGIN: Vendor JS-->
<script src="{{ asset('backend/app-assets/vendors/js/vendors.min.js') }}"></script>
<script>
    $(document).ready(function() {
        var maxWeek = 53;
        var i = 2;

        $('#btn-add-week').click(function () {
            var weekData = '<div>\
                <div class="row">\
                    <div class="d-flex justify-content-between">\
                        <h4 class="mb-0">Week '+i+'</h4>\
                        <button type="button" class="btn btn-outline-danger btn-remove-week"><i data-feather="minus"></i></button>\
                    </div>\
                    <div class="mb-1 col-md-12">\
                        <label class="form-label" for="day-1">Day 1</label>\
                        <select class="select2 form-select" id="week-'+i+'-day-1-id" name="week_'+i+'_day_1_id[]" multiple>\
                            <option>Select Exercises</option>\
                            @foreach ($exercises as $exercise)\
                                <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
                            @endforeach\
                        </select>\
                    </div>\
                </div>\
                <div class="row">\
                    <div class="mb-1 col-md-6">\
                        <label class="form-label" for="day-2">Day 2</label>\
                        <select class="select2 form-select" id="week-'+i+'-day-2-id" name="day_2_id[]" multiple>\
                            <option>Select Exercises</option>\
                            @foreach ($exercises as $exercise)\
                                <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
                            @endforeach\
                        </select>\
                    </div>\
                    <div class="mb-1 col-md-6">\
                        <label class="form-label" for="day-3">Day 3</label>\
                        <select class="select2 form-select" id="week-'+i+'-day-3-id" name="day_3_id[]" multiple>\
                            <option>Select Exercises</option>\
                            @foreach ($exercises as $exercise)\
                                <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
                            @endforeach\
                        </select>\
                    </div>\
                    <div class="mb-1 col-md-6">\
                        <label class="form-label" for="day-4">Day 4</label>\
                        <select class="select2 form-select" id="week-'+i+'-day-4-id" name="day_4_id[]" multiple>\
                            <option>Select Exercises</option>\
                            @foreach ($exercises as $exercise)\
                                <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
                            @endforeach\
                        </select>\
                    </div>\
                    <div class="mb-1 col-md-6">\
                        <label class="form-label" for="day-5">Day 5</label>\
                        <select class="select2 form-select" id="week-'+i+'-day-5-id" name="day_5_id[]" multiple>\
                            <option>Select Exercises</option>\
                            @foreach ($exercises as $exercise)\
                                <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
                            @endforeach\
                        </select>\
                    </div>\
                    <div class="mb-1 col-md-6">\
                        <label class="form-label" for="day-6">Day 6</label>\
                        <select class="select2 form-select" id="week-'+i+'-day-6-id" name="day_6_id[]" multiple>\
                            <option>Select Exercises</option>\
                            @foreach ($exercises as $exercise)\
                                <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
                            @endforeach\
                        </select>\
                    </div>\
                    <div class="mb-1 col-md-6">\
                        <label class="form-label" for="day-7">Day 7</label>\
                        <select class="select2 form-select" id="week-'+i+'-day-7-id" name="day_7_id[]" multiple>\
                            <option>Select Exercises</option>\
                            @foreach ($exercises as $exercise)\
                                <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
                            @endforeach\
                        </select>\
                    </div>\
                    <hr class="text-primary">\
                </div>\
            </div>';

            if(i <= maxWeek) {
                i++;
                $("#week-data").append(weekData);
            }
            
        });

        $('.btn-remove-week').click(function (e) {
            e.preventDefault();
            $(this).parent('div').remove();
            i--;
        });

    });
</script>
<!-- BEGIN Vendor JS-->

<!-- BEGIN: Page Vendor JS-->
<script src="{{ asset('backend/app-assets/vendors/js/forms/wizard/bs-stepper.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/vendors/js/forms/select/select2.full.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/vendors/js/forms/validation/jquery.validate.min.js') }}"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Theme JS-->
<script src="{{ asset('backend/app-assets/js/core/app-menu.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/js/core/app.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/js/scripts/customizer.min.js') }}"></script>
<!-- END: Theme JS-->

<!-- BEGIN: Page JS-->
<script src="{{ asset('backend/app-assets/js/scripts/forms/form-wizard.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/vendors/js/ckeditor/ckeditor.js') }}"></script>
<!-- END: Page JS-->
<script>
    CKEDITOR.replace( 'description' );

    $(window).on('load', function () {
        if (feather) {
            feather.replace({
                width: 14,
                height: 14
            });
        }
    })
</script>
@endsection

@section('content')
<!-- BEGIN: Content-->
<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper container-xxl p-0">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-start mb-0">Workout Wizard</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('dashboard') }}">Home</a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="{{ route('workouts.index') }}">Workouts</a>
                                </li>
                                <li class="breadcrumb-item active">
                                    Create Workout
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <!-- Horizontal Wizard -->
            <section class="horizontal-wizard">
                <div class="bs-stepper horizontal-wizard-example">
                    <div class="bs-stepper-header" role="tablist">
                        <div class="step" data-target="#account-details" role="tab" id="account-details-trigger">
                            <button type="button" class="step-trigger">
                                <span class="bs-stepper-box">1</span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title">Basic Details</span>
                                    <span class="bs-stepper-subtitle">Basic workout info</span>
                                </span>
                            </button>
                        </div>
                        <div class="line">
                            <i data-feather="chevron-right" class="font-medium-2"></i>
                        </div>
                        <div class="step" data-target="#personal-info" role="tab" id="personal-info-trigger">
                            <button type="button" class="step-trigger">
                                <span class="bs-stepper-box">2</span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title">Workout Details</span>
                                    <span class="bs-stepper-subtitle">Workout schedule details</span>
                                </span>
                            </button>
                        </div>
                        <div class="line">
                            <i data-feather="chevron-right" class="font-medium-2"></i>
                        </div>
                        <div class="step" data-target="#address-step" role="tab" id="address-step-trigger">
                            <button type="button" class="step-trigger">
                                <span class="bs-stepper-box">3</span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title">Address</span>
                                    <span class="bs-stepper-subtitle">Add Address</span>
                                </span>
                            </button>
                        </div>
                        <div class="line">
                            <i data-feather="chevron-right" class="font-medium-2"></i>
                        </div>
                        <div class="step" data-target="#social-links" role="tab" id="social-links-trigger">
                            <button type="button" class="step-trigger">
                                <span class="bs-stepper-box">4</span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title">Social Links</span>
                                    <span class="bs-stepper-subtitle">Add Social Links</span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="bs-stepper-content">
                        <div id="account-details" class="content" role="tabpanel"
                            aria-labelledby="account-details-trigger">
                            <div class="content-header">
                                <h5 class="mb-0">Basic Details</h5>
                                <small class="text-muted">Enter basic workout details</small>
                            </div>
                            <form>
                                <div class="row">
                                    <div class="mb-1 col-md-12">
                                        <label class="form-label" for="title">Title</label>
                                        <input type="text" name="title" id="title" class="form-control" placeholder="Jumping Jack Pro Max" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="mb-1 col-md-12">
                                        <label class="form-label" for="description">Description</label>
                                        <textarea class="form-control" rows="3" id="description" name="description" placeholder="Enter Workout Description"></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="goal">Goal</label>
                                        <select class="select2 form-select" id="goal-id" name="goal_id">
                                            <option>Select Goal</option>
                                            @foreach ($goals as $goal)
                                                <option value="{{ $goal->id }}">{{ ucfirst($goal->title) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="level">Level</label>
                                        <select class="select2 form-select" id="level-id" name="level_id">
                                            <option>Select Level</option>
                                            @foreach ($levels as $level)
                                                <option value="{{ $level->id }}">{{ ucfirst($level->title) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="bodyparts">Bodyparts</label>
                                        <select class="select2 form-select" id="bodypart-id" name="bodypart_id[]" multiple>
                                            <option disabled>Select Body Part</option>
                                            @foreach ($bodyparts as $bodypart)
                                                <option value="{{ $bodypart->id }}">{{ ucfirst($bodypart->title) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="equipment">Equipments</label>
                                        <select class="select2 form-select" id="equipment-id" name="equipment_id[]"multiple>
                                            <option disabled>Select Equipment</option>
                                            @foreach ($equipments as $equipment)
                                                <option value="{{ $equipment->id }}">{{ ucfirst($equipment->title) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </form>
                            <div class="d-flex justify-content-between">
                                <button class="btn btn-outline-secondary btn-prev" disabled>
                                    <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                    <span class="align-middle d-sm-inline-block d-none">Previous</span>
                                </button>
                                <button class="btn btn-primary btn-next">
                                    <span class="align-middle d-sm-inline-block d-none">Next</span>
                                    <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                                </button>
                            </div>
                        </div>
                        <div id="personal-info" class="content" role="tabpanel" aria-labelledby="personal-info-trigger">
                            <div class="content-header">
                                <h5 class="mb-0">Workout Details</h5>
                                <small>Workout schedule details</small>
                            </div>
                            <form>
                                <div id="week-data">
                                    <div class="row">
                                        <div class="d-flex justify-content-between">
                                            <h4 class="mb-0">Week 1</h4>
                                            <button type="button" class="btn btn-outline-primary" id="btn-add-week"><i data-feather="plus"></i></button>
                                        </div>
                                        <div class="mb-1 col-md-12">
                                            <label class="form-label" for="day-1">Day 1</label>
                                            <select class="select2 form-select" id="week-1-day-1-id" name="day_1_id[]" multiple>
                                                <option>Select Exercises</option>
                                                @foreach ($exercises as $exercise)
                                                    <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="mb-1 col-md-6">
                                            <label class="form-label" for="day-2">Day 2</label>
                                            <select class="select2 form-select" id="week-1-day-2-id" name="day_2_id[]" multiple>
                                                <option>Select Exercises</option>
                                                @foreach ($exercises as $exercise)
                                                    <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-1 col-md-6">
                                            <label class="form-label" for="day-3">Day 3</label>
                                            <select class="select2 form-select" id="week-1-day-3-id" name="day_3_id[]" multiple>
                                                <option>Select Exercises</option>
                                                @foreach ($exercises as $exercise)
                                                    <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-1 col-md-6">
                                            <label class="form-label" for="day-4">Day 4</label>
                                            <select class="select2 form-select" id="week-1-day-4-id" name="day_4_id[]" multiple>
                                                <option>Select Exercises</option>
                                                @foreach ($exercises as $exercise)
                                                    <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-1 col-md-6">
                                            <label class="form-label" for="day-5">Day 5</label>
                                            <select class="select2 form-select" id="week-1-day-5-id" name="day_5_id[]" multiple>
                                                <option>Select Exercises</option>
                                                @foreach ($exercises as $exercise)
                                                    <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-1 col-md-6">
                                            <label class="form-label" for="day-6">Day 6</label>
                                            <select class="select2 form-select" id="week-1-day-6-id" name="day_6_id[]" multiple>
                                                <option>Select Exercises</option>
                                                @foreach ($exercises as $exercise)
                                                    <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-1 col-md-6">
                                            <label class="form-label" for="day-7">Day 7</label>
                                            <select class="select2 form-select" id="week-1-day-7-id" name="day_7_id[]" multiple>
                                                <option>Select Exercises</option>
                                                @foreach ($exercises as $exercise)
                                                    <option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <hr class="text-primary">
                                    </div>
                                </div>
                            </form>
                            <div class="d-flex justify-content-between">
                                <button class="btn btn-primary btn-prev">
                                    <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                    <span class="align-middle d-sm-inline-block d-none">Previous</span>
                                </button>
                                <button class="btn btn-primary btn-next">
                                    <span class="align-middle d-sm-inline-block d-none">Next</span>
                                    <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                                </button>
                            </div>
                        </div>
                        <div id="address-step" class="content" role="tabpanel" aria-labelledby="address-step-trigger">
                            <div class="content-header">
                                <h5 class="mb-0">Address</h5>
                                <small>Enter Your Address.</small>
                            </div>
                            <form>
                                <div class="row">
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="address">Address</label>
                                        <input type="text" id="address" name="address" class="form-control"
                                            placeholder="98  Borough bridge Road, Birmingham" />
                                    </div>
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="landmark">Landmark</label>
                                        <input type="text" name="landmark" id="landmark" class="form-control"
                                            placeholder="Borough bridge" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="pincode1">Pincode</label>
                                        <input type="text" id="pincode1" class="form-control" placeholder="658921" />
                                    </div>
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="city1">City</label>
                                        <input type="text" id="city1" class="form-control" placeholder="Birmingham" />
                                    </div>
                                </div>
                            </form>
                            <div class="d-flex justify-content-between">
                                <button class="btn btn-primary btn-prev">
                                    <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                    <span class="align-middle d-sm-inline-block d-none">Previous</span>
                                </button>
                                <button class="btn btn-primary btn-next">
                                    <span class="align-middle d-sm-inline-block d-none">Next</span>
                                    <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                                </button>
                            </div>
                        </div>
                        <div id="social-links" class="content" role="tabpanel" aria-labelledby="social-links-trigger">
                            <div class="content-header">
                                <h5 class="mb-0">Social Links</h5>
                                <small>Enter Your Social Links.</small>
                            </div>
                            <form>
                                <div class="row">
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="twitter">Twitter</label>
                                        <input type="text" id="twitter" name="twitter" class="form-control"
                                            placeholder="https://twitter.com/abc" />
                                    </div>
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="facebook">Facebook</label>
                                        <input type="text" id="facebook" name="facebook" class="form-control"
                                            placeholder="https://facebook.com/abc" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="google">Google+</label>
                                        <input type="text" id="google" name="google" class="form-control"
                                            placeholder="https://plus.google.com/abc" />
                                    </div>
                                    <div class="mb-1 col-md-6">
                                        <label class="form-label" for="linkedin">Linkedin</label>
                                        <input type="text" id="linkedin" name="linkedin" class="form-control"
                                            placeholder="https://linkedin.com/abc" />
                                    </div>
                                </div>
                            </form>
                            <div class="d-flex justify-content-between">
                                <button class="btn btn-primary btn-prev">
                                    <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                    <span class="align-middle d-sm-inline-block d-none">Previous</span>
                                </button>
                                <button class="btn btn-success btn-submit">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- /Horizontal Wizard -->
        </div>
    </div>
</div>
<!-- END: Content-->
@endsection
laravel

1条答案

按热度按时间
xriantvc

xriantvc1#

更改此行

$('#btn-add-week').click(function () {

到这个

$(document).on('click', '#btn-add-week', function () {
赞(0）分享  回复(0）举报  2023-02-05
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com