.click（）函数不'；t工作javascript/jquery

更新：

不知怎的，我试过之后，它的效果很好

更新

我正在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");
    });

});

所有函数，如

getInstitution（）

，

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>

{{csrf_field（）}}
机构
学术生涯
时期
部门
截止日期
提交
搜寻

我已经将jquery用于我的主布局（Laravel 5）

比努斯-收益率（‘头衔’）

我希望搜索按钮/Div在我单击时执行某些操作。我看不出这里出了什么问题

---

我已经尝试了

到

，但它的工作方式就像提交一样。我还尝试在我的JS代码中添加

event.preventDefault（）

，但效果不太好。

我没有评论的名声，但您是否在脚本之前添加了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>

$（'#postForm'）。在（'单击'，'搜索'，函数（）上）{
警告（“该段落被点击”）；
控制台日志（“abc”）；
});

---

上面的内容将允许javascript在文档加载后购买的项目上运行，但是在文档加载时可用的父元素上设置它很重要，我没有评论的名声，但是您是否在脚本之前添加了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>

$（'#postForm'）。在（'单击'，'搜索'，函数（）上）{
警告（“该段落被点击”）；
控制台日志（“abc”）；
});

---

上面的内容将允许javascript在文档加载后购买的项目上运行，但是在文档加载时可用的父元素上设置javascript非常重要，也许您可以尝试使用事件委派

$(document).ready(function(){

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

});

---

也许你可以试试活动授权

$(document).ready(function(){

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

});

---

你的代码工作正常。您需要在期末考试中编写jquery库，就在

。。。

---

例如，它工作正常！：

您的代码工作正常。您需要在期末考试中编写jquery库，就在

。。。

例如，它工作正常！：

提交
搜寻

看起来它将在页面上呈现为两个按钮。这里您的ID附加到div，而不是按钮，它们看起来都像是加载引导的按钮，但只有带有“search”的div，因为内容会做任何事情

这是唯一一件看起来很奇怪的事情，唯一的另一个问题是您没有按照其他地方所述加载jquery。

Submit
搜寻

看起来它将在页面上呈现为两个按钮。这里您的ID附加到div，而不是按钮，它们看起来都像是加载引导的按钮，但只有带有“search”的div，因为内容会做任何事情

---

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

您的HTML似乎是通过ajax调用加载的，它在事件侦听器单击

#search

元素已注册后追加到文档中。。还有一些问题，例如不包括jQuery。@SpencerWieczorek我已经在我的JS代码和主布局（Laravel 5）中放置了jQuery库。@WillySandi请在您的问题中提供一个示例。如果所显示的代码没有您描述的问题（这也会使它脱离主题），那么它实际上不可能提供帮助。@PigBall是的，我的代码是通过ajax加载的。但我只是在我的表单中附加，而不是整个表单。它似乎是通过ajax调用加载的HTML，它在事件侦听器单击已注册的

#search

元素后附加到文档中。。还有一些问题，例如不包括jQuery。@SpencerWieczorek我已经在我的JS代码和主布局（Laravel 5）中放置了jQuery库。@WillySandi请在您的问题中提供一个示例。如果所显示的代码没有您描述的问题（这也会使它脱离主题），那么它实际上不可能提供帮助。@PigBall是的，我的代码是通过ajax加载的。但是我只是在我的表单上附加了，而不是整个表单谢谢你的回答，我尝试了你的解决方案，但它也不起作用。我已经在JS代码的顶部有了jquery库，也把它放在了我的主布局（Laravel 5）中，它肯定会正常工作，当你点击它的时候，它只是一个文本“搜索”会被激活是吗？另外，您可以在浏览器中打开控制台（f12打开开发人员工具，然后选择控制台项目），然后检查脚本中是否出现任何错误。谢谢您的回答，我尝试了您的解决方案，但也不起作用。我已经在JS代码的顶部有了jquery库，也把它放在了我的主布局（Laravel 5）中，它肯定会正常工作，当你点击它的时候，它只是一个文本“搜索”会被激活是吗？您也可以在浏览器中打开控制台（f12）以打开开发人员工具，然后选择控制台