如何使用外部脚本文件从DOM调用Jquery中的函数

时间:2017-02-17 11:22:22

标签: jquery laravel

我的刀片文件中有这个模态

                    <div id="addBtn" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h5 class="modal-title" id="myModalLabel">Add a medicine</h5>
                                </div>
                                <div class="modal-body">
                                    <form>
                                     <div class="form-group">
                                        <label class="control-label mb-10">Generic Name</label>
                                        <select class="form-control" name="medicine_id">
                                            @foreach($items as $item)
                                            <option value="{{$item->id}}" >{{$item->generic_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label mb-10">Dosage Volume</label>
                                        <input type="text" name="dosage_name" class="form-control" placeholder="Example: 20mg">
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label mb-10">Form</label>
                                        <input type="text" name="form" class="form-control" placeholder="Bottle, Tablet">
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label mb-10">Price Per piece</label>
                                        <input type="text" name="price"  class="form-control" placeholder="Price">
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label mb-10">Insert a photo</label>
                                        <div class="panel-wrapper collapse in">
                                            <div class="panel-body">
                                               <div class="mt-20">
                                                <input type="file" name="photo" id="input-file-now" class="dropify" >
                                            </div>  
                                        </div>
                                    </div>
                                </div>

                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success waves-effect" data-dismiss="modal" id="save-dosage">Save</button>
                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
                        </div>

                    </div>
                    <!-- /.modal-content -->
                </div>
            </div>

一旦点击了保存剂量按钮的ID

这应该叫做

function addDosage(url){

    $('#save-dosage').click(function(e){
        console.log(e);

    });


}

现在的问题是,我想调用名为crud.js的外部文件中的addDosage函数

我正在使用laravel,所以这是我的结束脚本代码

<script>
    var token = '{{ Session::token() }}';
    var url = '{{ route('storeDosage') }}';
</script>
<script type="text/javascript" src="{{ URL::to('assets/scripts/crud.js') }}"></script>
@endsection

3 个答案:

答案 0 :(得分:1)

如果正确包含了crud.js文件。然后无需在DOM文件中调用它,因为click是不会在DOM上激活的事件,就像在DOM文件中调用它一样。

请写下你的crud.js,如下所示

 $('#save-dosage').click(function(e){

     var url = "" ;  
     addDosage(url)

  });

  function addDosage(url){

      console.log("Here");

   }

答案 1 :(得分:0)

你可以打电话给它。使用const fs = require('fs'); const execSync = require('child_process').execSync; module.exports = function(context) { const basePath = context.opts.projectRoot; const baseWWW = basePath + '/www'; process.chdir('../bmi-surgical-app'); console.log(`New directory: ${process.cwd()}`); execSync("ng build --prod --base-href .",{stdio:[0,1,2]}); var files = fs.readdirSync(baseWWW); for (var i = 0; i < files.length; i++) { if (files[i].endsWith('.gz')) { fs.unlinkSync(baseWWW + '/' + files[i]); } } fs.writeFileSync(baseWWW + '/.gitignore', `# Ignore everything in this directory * # Except this file !.gitignore `); }; 标记将脚本添加到HTML页面时,它们会动态地成为页面的一部分(变为全局)。所以你可以打电话,它会执行。

答案 2 :(得分:0)

如果问题在于访问其他文件,那么最简单的方法是将其包含在内:<script src="crud.js"></script>

然后在crud.js中添加如下监听器:

$(function(){
  $('#save-dosage').click(function(e){
      console.log(e);
  });
});