如何從DOM使用外部腳本文件

Question

我從我的刀片文件

    <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被點擊

這應該是調用函數jQuery中所謂

function addDosage(url){ 

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

    }); 


} 

現在，這裏的事情是，我想打電話給addDosage的功能是在一個名爲crud.js

外部文件

我使用laravel的方式，所以這是我的最終的腳本代碼

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

Answer 1

如果crud.js文件正確包括在內。然後不需要在DOM文件中調用它，因爲click是不會在DOM上觸發的事件，就好像您在DOM文件中調用它一樣。

所以寫在你的crud.js像下面

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

    var url = "" ; 
    addDosage(url) 

    }); 

    function addDosage(url){ 

     console.log("Here"); 

    } 

Answer 2

你可以調用它。當您使用<script>標記將腳本添加到HTML頁面時，它們將成爲頁面的一部分（成爲全局的）。所以你可以打電話，它會執行。

Answer 3

如果問題在於訪問其他文件，最簡單的方法就是將其包含在內：<script src="crud.js"></script>。

然後在crud.js添加監聽器是這樣的：

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