Question

更新：

在我尝试之后，我的工作正常。

更新

我在我的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代码中，但它也没有用。

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>

之前编写jquery库

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

示例工作正常！：Example 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 个答案: