.click（）函数不起作用javascript / jquery

Question

更新：

不知怎的，我尝试后正常工作..

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>

我希望Search Button / Div在点击时执行某些操作。 我看不出这里有什么问题。

我已经尝试过<div>到<button>但它只是像提交一样工作。 我也已经尝试将event.preventDefault()放在我的JS代码中，但它也没有用。

Answer 1

我没有评论的声誉，但是你在脚本之前添加了一个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在文档加载后购买的项目上运行，但是重要的是你将它设置在文档加载时可用的父元素上

Answer 2

也许你可以试试活动授权......

$(document).ready(function(){

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

});

Answer 3

你的代码工作正常。 你需要在</body>之前的final中编写jquery库

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

它的例子工作正常！：示例Jsfiddle

Answer 4

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

看起来它会在页面上呈现为两个按钮。 这里你的ID附加到div而不是按钮，它们看起来应该看起来像加载引导程序的按钮，但只有带有“搜索”作为内容的div才能执行任何操作。

这是唯一看似奇怪的事情，唯一的另一个问题是你没有像其他地方所说的那样加载你的jquery。

.click（）函数不起作用javascript / jquery

问题描述

4 个解决方案

解决方案1
0 2017-04-19 01:55:41

解决方案2
0 2017-04-19 01:58:08

解决方案3
0 2017-04-19 01:59:42

解决方案4
0

.click（）函数不起作用javascript / jquery

问题描述

4 个解决方案

解决方案1 0 2017-04-19 01:55:41

解决方案2 0 2017-04-19 01:58:08

解决方案3 0 2017-04-19 01:59:42

解决方案4 0

解决方案1
0 2017-04-19 01:55:41

解决方案2
0 2017-04-19 01:58:08

解决方案3
0 2017-04-19 01:59:42

解决方案4
0