jqueryを呼び出すにはどうすればいいですか？

Question

助けてください。 私は、製品を追加するコードを持っています。私はckeditorを使用していますが、新しいテキストエリアを追加したい場合は、ckeditorを使用して問題を解決してください。私は追加を使用している。私はボタンを使用する関数を追加すると、それは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

たぶん、あなたはこのスニペットのようにクリックイベントを追加する必要があります助けてください：answering.I'veロードAPPENDため

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 
    }); 
    });