。點擊（）函數不工作的JavaScript/jQuery的

不知何故，只是正常工作後，我試了一下..

UPDATE

我使用我的javascript .click()功能，但它不起作用。

這裏是我的JS代碼：

src="jquery.js"; 
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); 
var institutionID, acadCareerID; 
$(document).ready(function(){ 


    getInstitution(); 

    institutionID = $("select#institution option:checked").val(); 
    if(institutionID == null){ 
     institutionID = 1; 
    } 

    getAcadCareerByInstitution(institutionID); 

    acadCareerID = $("select#acadCareer option:checked").val(); 
    if(acadCareerID == null){ 
     acadCareerID = 1; 
    } 

    getPeriodByAcadCareerAndInstitution(acadCareerID); 
    getDepartmentByAcadCareer(acadCareerID); 



    $("select#institution").change(function(){ 
     institutionID = $("select#institution option:checked").val(); 
     getAcadCareerByInstitution(institutionID); 
    }) 
    $("select#acadCareer").change(function(){ 
     acadCareerID = $("select#acadCareer option:checked").val(); 
     getPeriodByAcadCareerAndInstitution(acadCareerID); 
     getDepartmentByAcadCareer(acadCareerID); 
    }) 


    $("div#search").click(function(){ 
     alert("The paragraph was clicked."); 
     console.log("abc"); 
    }); 

});

像getInstituion()，getAcadCareerByInstitution(institutionID)等所有功能都Ajax調用。

這裏是我的HTML代碼：我的總綱

<form action="doInsertSchedule" method="POST" enctype="multipart/form-data"> 
       {{csrf_field()}} 
       <div class="form-group"> 
        <label for="institution">Institution</label> 
        <select name="institution" class="form-control" id="institution"> 
        </select> 
       </div> 
       <div class="form-group"> 
        <label for="acadCareer">Academic Career</label> 
        <select name="acadCareer" class="form-control" id="acadCareer"> 
        </select> 
       </div> 
       <div class="form-group"> 
        <label for="period">Period</label> 
        <select name="period" class="form-control" id="period"> 
        </select> 
       </div> 
       <div class="form-group"> 
        <label for="department">Department</label> 
        <select name="department" class="form-control" id="department"> 
        </select> 
       </div> 
       <div class="form-group"> 
        <label for="date">Deadline Date</label> 
        <input type="date" class="form-control" id="deadline" placeholder="Deadline Date" name="deadline"> 
       </div> 

       <button type="submit" class="btn btn-default">Submit</button> 
       <div id="search" class="btn btn-default">Search</div> 
      </form>

我已經把jQuery的（Laravel 5）

<head> 
     <link rel="stylesheet" type="text/css" href="{{url()}}/css/bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" href="{{url()}}/css/style.css"> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">   
     <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
     <script src="{{url()}}/js/tools.js"></script> 
     <script src="{{url()}}/js/bootstrap.min.js"></script> 
     <title>BINUS - @yield('title')</title> 
     <meta name="csrf-token" content="{{ csrf_token() }}" /> 
</head>

我想搜索按鈕/格做一些事情，當我點擊。我看不出這裏有什麼問題。

我已經試過<div>到<button>但它只是像提交一樣工作。我也已經嘗試把event.preventDefault()放在我的JS代碼中，但它並沒有工作。

來源

2017-04-19 Willy Sandi

看起來你的HTML是通過ajax調用加載的，它在事件監聽器點擊已經註冊過的'＃search'元素後追加到文檔中。 –

[你顯示的代碼沒有錯（https://jsfiddle.net/ut5j18m6/）。還有其他問題，比如不包括jQuery。 –

@SpencerWieczorek我已經把jquery庫放在我的JS代碼和主佈局（Laravel 5）中。 –

我沒有評論的聲望，但是你有沒有在腳本之前添加jQuery庫？

其次，如果你沒有和頁面上的項目加載的文件已加載後，你將需要改變你的代碼了，比如：在讓表單的ID

<form action="doInsertSchedule" method="POST" enctype="multipart/form-data" id="postForm">

然後你jQuery腳本

<script> 
$('#postForm').on('click', '#search', function(){ 
    alert("The paragraph was clicked."); 
    console.log("abc"); 
}); 
</script>

以上將允許JavaScript來對文件被加載後購買了項目運行，但它是非常重要的，你把它是在文檔加載繳費父元素

來源

2017-04-19 01:55:41 Rando

感謝您的答案，我試過你的解決方案，但它沒有工作。我已經在JS代碼頂部有jquery庫，並且也把它放在我的主佈局（Laravel 5） –

它肯定應該在運行，它只是文本「搜索」，當你點擊它會激活是啊？在您的瀏覽器中，您也可以打開控制檯（f12打開開發人員工具，然後選擇控制檯項目），然後檢查是否有任何錯誤出現在您的腳本中。 – Rando

也許你可以使用事件代表團嘗試...

$(document).ready(function(){ 

    $("body").on("click", "#search", function(){ 
     alert("The paragraph was clicked."); 
     console.log("abc"); 
    }); 

});

來源

2017-04-19 01:58:08 Badacadabra

已經嘗試過了，但它似乎沒有發生按鈕/格 –

你的代碼工作確定。你需要寫jQuery庫在決賽中，之前的</body>

... 
    <script type="text/javascript" src=".../jquery.js"></script> 
</body>

例如，它工作正常！：Example Jsfiddle

來源

2017-04-19 01:59:42

<button type="submit" class="btn btn-default">Submit</button> 
<div id="search" class="btn btn-default">Search</div>

這看起來將在頁面上呈現爲兩個按鈕。你的ID附加到div，而不是按鈕，它們應該看起來像提供引導程序加載的按鈕，但只有具有「搜索」作爲內容的div才能做任何事情。

這是唯一看起來很奇怪，唯一的其他問題是你不加載你的jQuery其他地方所述。

來源

2017-04-19 02:01:46 Eddie

。點擊（）函數不工作的JavaScript/jQuery的

回答

相關問題