如何調用jquery後加載完整的網

Question

請幫我， 我有一個代碼添加產品，我有使用ckeditor但我希望添加新的textarea使用ckeditor，並解決問題後。我有一個附加。當我點擊按鈕使用函數append然後它不加載jquery。 我不知道如何再次回憶jquery。請幫我

<div class="form-group"> 
<div class="col-md-12 col-xs-12" style="margin: 0 auto; text-align: center"> 
<a onclick="appendText()" class="offsite" >Add Project</a> //function append 
<div class="append"></div> // Load append 
</div> 
</div> 
<script src="{{asset('assets/global/plugins/ckeditor/ckeditor.js')}}" type="text/javascript"></script> 
<script src="{{asset('assets/pages/scripts/components-editors.min.js')}}" async type="text/javascript"></script> 
<script> 
    function appendText() { 
     var txt1 = '<div class="form-group"><label class="control-label col-md-3">Project</label><div class="col-md-9 col-xs-12"><select class="bs-select form-control" name="project"><option value="" >------------- Select project -----------</option>@forelse($parent as $item)<option value="{{$item->id}}">{{$item->title}}</option>@empty @endforelse</select></div></div>'; // Create text with HTML 
     var txt2 = ' <div class="form-group"><label class="control-label col-md-3">Task list</label><div class="col-md-9 col-xs-12"><ul class="nav nav-tabs"><li class="active"><a href="#tab_3_1" data-toggle="tab"> VI </a></li><li><a href="#tab_3_2" data-toggle="tab"> EN </a></li></ul><div class="tab-content"><div class="tab-pane fade active in" id="tab_3_1"><textarea class="ckeditor form-control" name="content_vi[]" rows="6" required></textarea></div><div class="tab-pane fade" id="tab_3_2"><textarea class="ckeditor form-control" name="content_en[]" rows="6" required></textarea></div></div></div></div>' 
     var txt3 = '<div class="form-group"><label class="control-label col-md-3">Detail</label><div class="col-md-9 col-xs-12"><ul class="nav nav-tabs"><li class="active"><a href="#tab_4_1" data-toggle="tab"> VI </a></li><li><a href="#tab_4_2" data-toggle="tab"> EN </a></li></ul><div class="tab-content"><div class="tab-pane fade active in" id="tab_4_1"><textarea class="ckeditor form-control" name="content_vi[]" rows="6" required></textarea></div><div class="tab-pane fade" id="tab_4_2"><textarea class="ckeditor form-control" name="content_en[]" rows="6" required></textarea></div></div></div></div>'; 
     var txt4 = '<div class="form-group"><label class="control-label col-md-3">Link demo</label><div class="col-md-9 col-xs-12"><input type="text" class="form-control" name="Link" ></div></div>'; 
     var txt5 = '<div class="form-group"><label class="control-label col-md-3">Status </label><div class="col-md-9 col-xs-12"><select name="status" class="form-control"><option value="1">Complete</option><option value="2">Waiting for Feedback</option><option value="3">Process</option></select><div id="process" class="process"><input type="range" name="process" min="0" max="100" value="50 %" id="fader"step="1" oninput="outputUpdate(value)" class="processing"><output for="fader" id="processing" class="process-number">50 %</output></div></div></div>'; 
     var txt6 = '<div class="form-group"><div class="col-md-12 col-xs-12" style="margin: 0 auto; text-align: center"><a onclick="appendText()" >Thêm Project</a></div></div>'; 
     $(".append").append(txt1, txt2, txt3, txt4, txt5, txt6); // Append new elements 
    } 
</script> 

Answer 1

也許你應該添加一個click事件這樣的片段：

https://jsfiddle.net/L9fe0py3/7/

$(document).ready(function(){ 
$('.offsite').click(function() { 
     var txt1 = '<div class="form-group"><label class="control-label col-md-3">Project</label><div class="col-md-9 col-xs-12"><select class="bs-select form-control" name="project"><option value="" >------------- Select project -----------</option>@forelse($parent as $item)<option value="{{$item->id}}">{{$item->title}}</option>@empty @endforelse</select></div></div>'; // Create text with HTML 
     var txt2 = ' <div class="form-group"><label class="control-label col-md-3">Task list</label><div class="col-md-9 col-xs-12"><ul class="nav nav-tabs"><li class="active"><a href="#tab_3_1" data-toggle="tab"> VI </a></li><li><a href="#tab_3_2" data-toggle="tab"> EN </a></li></ul><div class="tab-content"><div class="tab-pane fade active in" id="tab_3_1"><textarea class="ckeditor form-control" name="content_vi[]" rows="6" required></textarea></div><div class="tab-pane fade" id="tab_3_2"><textarea class="ckeditor form-control" name="content_en[]" rows="6" required></textarea></div></div></div></div>' 
     var txt3 = '<div class="form-group"><label class="control-label col-md-3">Detail</label><div class="col-md-9 col-xs-12"><ul class="nav nav-tabs"><li class="active"><a href="#tab_4_1" data-toggle="tab"> VI </a></li><li><a href="#tab_4_2" data-toggle="tab"> EN </a></li></ul><div class="tab-content"><div class="tab-pane fade active in" id="tab_4_1"><textarea class="ckeditor form-control" name="content_vi[]" rows="6" required></textarea></div><div class="tab-pane fade" id="tab_4_2"><textarea class="ckeditor form-control" name="content_en[]" rows="6" required></textarea></div></div></div></div>'; 
     var txt4 = '<div class="form-group"><label class="control-label col-md-3">Link demo</label><div class="col-md-9 col-xs-12"><input type="text" class="form-control" name="Link" ></div></div>'; 
     var txt5 = '<div class="form-group"><label class="control-label col-md-3">Status </label><div class="col-md-9 col-xs-12"><select name="status" class="form-control"><option value="1">Complete</option><option value="2">Waiting for Feedback</option><option value="3">Process</option></select><div id="process" class="process"><input type="range" name="process" min="0" max="100" value="50 %" id="fader"step="1" oninput="outputUpdate(value)" class="processing"><output for="fader" id="processing" class="process-number">50 %</output></div></div></div>'; 
     var txt6 = '<div class="form-group"><div class="col-md-12 col-xs-12" style="margin: 0 auto; text-align: center"><a onclick="appendText()" >Thêm Project</a></div></div>'; 
     $(".append").append($(txt1)); 
     $(".append").append($(txt2)); 
     $(".append").append($(txt3)); 
     $(".append").append($(txt4)); 
     $(".append").append($(txt5)); 
     $(".append").append($(txt6)); // Append new elements 
    }); 
    });