I have a form wizard and I am trying to dynamically add select tags and I have added a click-to-add button to generate the HTML code snippet. However, the css styles and select-2 don't apply to the code generated by the js click event and the attached event to the dynamic code also doesn't fire when clicked.
I have tried rearranging the js files but can't figure out why it still doesn't work.
In my below laravel code snippet, I have placed the js implementation directly below jquery cos it was implemented using jquery but it still doesn't work.
@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 >\
<div >\
<h4 >Week ' i '</h4>\
<button type="button" ><i data-feather="minus"></i></button>\
</div>\
<div >\
<label for="day-1">Day 1</label>\
<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 >\
<div >\
<label for="day-2">Day 2</label>\
<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 >\
<label for="day-3">Day 3</label>\
<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 >\
<label for="day-4">Day 4</label>\
<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 >\
<label for="day-5">Day 5</label>\
<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 >\
<label for="day-6">Day 6</label>\
<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 >\
<label for="day-7">Day 7</label>\
<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 >\
</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 >
<div ></div>
<div ></div>
<div >
<div >
<div >
<div >
<div >
<h2 >Workout Wizard</h2>
<div >
<ol >
<li >
<a href="{{ route('dashboard') }}">Home</a>
</li>
<li >
<a href="{{ route('workouts.index') }}">Workouts</a>
</li>
<li >
Create Workout
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div >
<!-- Horizontal Wizard -->
<section >
<div >
<div role="tablist">
<div data-target="#account-details" role="tab" id="account-details-trigger">
<button type="button" >
<span >1</span>
<span >
<span >Basic Details</span>
<span >Basic workout info</span>
</span>
</button>
</div>
<div >
<i data-feather="chevron-right" ></i>
</div>
<div data-target="#personal-info" role="tab" id="personal-info-trigger">
<button type="button" >
<span >2</span>
<span >
<span >Workout Details</span>
<span >Workout schedule details</span>
</span>
</button>
</div>
<div >
<i data-feather="chevron-right" ></i>
</div>
<div data-target="#address-step" role="tab" id="address-step-trigger">
<button type="button" >
<span >3</span>
<span >
<span >Address</span>
<span >Add Address</span>
</span>
</button>
</div>
<div >
<i data-feather="chevron-right" ></i>
</div>
<div data-target="#social-links" role="tab" id="social-links-trigger">
<button type="button" >
<span >4</span>
<span >
<span >Social Links</span>
<span >Add Social Links</span>
</span>
</button>
</div>
</div>
<div >
<div id="account-details" role="tabpanel"
aria-labelledby="account-details-trigger">
<div >
<h5 >Basic Details</h5>
<small >Enter basic workout details</small>
</div>
<form>
<div >
<div >
<label for="title">Title</label>
<input type="text" name="title" id="title" placeholder="Jumping Jack Pro Max" />
</div>
</div>
<div >
<div >
<label for="description">Description</label>
<textarea rows="3" id="description" name="description" placeholder="Enter Workout Description"></textarea>
</div>
</div>
<div >
<div >
<label for="goal">Goal</label>
<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 >
<label for="level">Level</label>
<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 >
<div >
<label for="bodyparts">Bodyparts</label>
<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 >
<label for="equipment">Equipments</label>
<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 >
<button disabled>
<i data-feather="arrow-left" ></i>
<span >Previous</span>
</button>
<button >
<span >Next</span>
<i data-feather="arrow-right" ></i>
</button>
</div>
</div>
<div id="personal-info" role="tabpanel" aria-labelledby="personal-info-trigger">
<div >
<h5 >Workout Details</h5>
<small>Workout schedule details</small>
</div>
<form>
<div id="week-data">
<div >
<div >
<h4 >Week 1</h4>
<button type="button" id="btn-add-week"><i data-feather="plus"></i></button>
</div>
<div >
<label for="day-1">Day 1</label>
<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 >
<div >
<label for="day-2">Day 2</label>
<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 >
<label for="day-3">Day 3</label>
<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 >
<label for="day-4">Day 4</label>
<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 >
<label for="day-5">Day 5</label>
<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 >
<label for="day-6">Day 6</label>
<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 >
<label for="day-7">Day 7</label>
<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 >
</div>
</div>
</form>
<div >
<button >
<i data-feather="arrow-left" ></i>
<span >Previous</span>
</button>
<button >
<span >Next</span>
<i data-feather="arrow-right" ></i>
</button>
</div>
</div>
<div id="address-step" role="tabpanel" aria-labelledby="address-step-trigger">
<div >
<h5 >Address</h5>
<small>Enter Your Address.</small>
</div>
<form>
<div >
<div >
<label for="address">Address</label>
<input type="text" id="address" name="address"
placeholder="98 Borough bridge Road, Birmingham" />
</div>
<div >
<label for="landmark">Landmark</label>
<input type="text" name="landmark" id="landmark"
placeholder="Borough bridge" />
</div>
</div>
<div >
<div >
<label for="pincode1">Pincode</label>
<input type="text" id="pincode1" placeholder="658921" />
</div>
<div >
<label for="city1">City</label>
<input type="text" id="city1" placeholder="Birmingham" />
</div>
</div>
</form>
<div >
<button >
<i data-feather="arrow-left" ></i>
<span >Previous</span>
</button>
<button >
<span >Next</span>
<i data-feather="arrow-right" ></i>
</button>
</div>
</div>
<div id="social-links" role="tabpanel" aria-labelledby="social-links-trigger">
<div >
<h5 >Social Links</h5>
<small>Enter Your Social Links.</small>
</div>
<form>
<div >
<div >
<label for="twitter">Twitter</label>
<input type="text" id="twitter" name="twitter"
placeholder="https://twitter.com/abc" />
</div>
<div >
<label for="facebook">Facebook</label>
<input type="text" id="facebook" name="facebook"
placeholder="https://facebook.com/abc" />
</div>
</div>
<div >
<div >
<label for="google">Google </label>
<input type="text" id="google" name="google"
placeholder="https://plus.google.com/abc" />
</div>
<div >
<label for="linkedin">Linkedin</label>
<input type="text" id="linkedin" name="linkedin"
placeholder="https://linkedin.com/abc" />
</div>
</div>
</form>
<div >
<button >
<i data-feather="arrow-left" ></i>
<span >Previous</span>
</button>
<button >Submit</button>
</div>
</div>
</div>
</div>
</section>
<!-- /Horizontal Wizard -->
</div>
</div>
</div>
<!-- END: Content-->
@endsection
CodePudding user response：
Change this line
$('#btn-add-week').click(function () {
to this
$(document).on('click', '#btn-add-week', function () {