Question

请帮帮我，我有一个代码添加产品，我已经使用ckeditor但我想添加新的textarea使用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

也许你应该像这个片段一样添加点击事件：

code

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

如何在加载完整网络后调用jquery

1 个答案: