2017-07-27 61 views
0

我測試引導莫代爾例如「live demo」我已經包括引導jQuery和JS在bootstrap starter template,也是自定義JavaScript:自舉模態例如不顯示

$('#myModal').on('shown.bs.modal', function() { 
    $('#myInput').focus() 
}) 

而是從模式運行我的文本編輯器不顯示像他們的網站上那樣。我點擊按鈕,沒有任何反應。 我使用谷歌Chrome檢查/控制檯嘗試,它表明:

Uncaught ReferenceError: $ is not defined

在行在功能啓動。當我移除自定義js時,它不會顯示錯誤,但仍然不會在Chrome,Edge或Firefox上顯示該模式。

我的代碼只是Bootstrap啓動器模板和它的模態現場演示代碼的組合,所以不需要在這裏發佈代碼。

而且,請注意,我可以使代碼工作(該按鈕的工作原理是在自舉網站所示的例子)通過分配一個ID,按鈕:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="button"> 

然後再添加自定義功能:

<script type="text/javascript"> 
    $("#button").click(function() { 
     $('.modal').modal('show'); 
    }); 
</script> 

但是,這不同於Bootstrap提供的示例代碼。

+0

忘記了加載jquery.min.js –

+0

你可以請提一下你的html代碼 –

+2

你必須在bootstrap.js之前使用jquery – Morteza

回答

-1

這意味着您在文檔準備就緒之前正在運行腳本。試試這個

$(function(){ 
    $('#myModal').on('shown.bs.modal', function() { 
    $('#myInput').focus() 
    }) 
}); 
+0

一秒鐘,爲什麼downvote ??你可以解釋嗎? –

+0

我沒有downvote,但提問者的問題是'''(又名Jquery),而不是DOM加載。 – Kevin

+0

是的,因爲jquery尚未加載。這就是他得到'$ undefined'錯誤的原因。 –

0

一般來說,這個錯誤是因爲你試圖使用JQuery而沒有在你的項目中首先引用它。

嘗試添加以下頂端您的網頁:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
+0

謝謝G.Hunt。如果我將自定義j放在頂部,您的代碼會停止錯誤消息。如果我將自定義js放在body的底部,則不需要它,因爲bootstrap starter已經鏈接到jquery。該按鈕仍然沒有做任何事情。 – Viet

0

謝謝大家的建議。我已經找到了答案: 通過引導的示例代碼有錯誤:

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
    Launch demo modal 
</button> 

data-target=""應包含的模式,其中,在這種情況下是不是#myModal的#exampleModal的ID。