Javascript onClick 功能不起作用答案

【问题标题】：Javascript onClick function doesnt workJavascript onClick 功能不起作用
【发布时间】：2016-11-24 16:01:05
【问题描述】：

我构建了一些小的 mvc asp.net 项目来检查 OutBrain API 的一些功能。

我输入了一个文本类型，它获取 MarketerI ID 并应返回他的姓名（从服务器）。但是当我按下按钮时什么都没有发生，我真的不知道为什么并且很高兴得到一些帮助！

谢谢

我的代码：

outBrain.js 文件

$("#buttonB").on('click', function () {
     getMarketer();
});


function getMarketer() {
    $.ajax({
        url: "/home/GetOutBrainMarketers",
        data: { id: $("marketerID").val() },
        success: function (result) {
            var marketer = JSON.parse(result);
            document.getElementById("nameMarketer").innerHTML = (marketer.name);
        }
    });
}

cshtml 文件（包含脚本文件路径）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="~/Scripts/outBrain.js"></script>
@{
    ViewBag.Title = "Home Page";
}
<br />
<div class="details">
    <label>Enter Marketer ID</label>
    <input type="text" class="form-control" id="marketerID">
    <input type="button" class="btn btn-default" value="OK" id="buttonB" />
    <section class="details">
        <div class="name">
            <label>Name</label>
            <label id="nameMarketer"></label>
        </div>
    </section>
</div>

还有控制器的代码，但是看不到要添加的地方。

【问题讨论】：

对我来说似乎还不错？ jsfiddle.net/mqLtw4s0
你有debugged吗？
@Liam 是的，他知道。尝试将点击事件放在匿名函数中。
@bilpor 它在匿名函数中？做什么？
要创建一个匿名函数，您将所有代码包装在$(function() { all code goes here }); 中，而不是将其放在此处，它位于全局范围内，而不是您应该拥有的。像这样放置代码使其关闭。

标签： javascript c# jquery asp.net-mvc

【解决方案1】：

试试：

$("#buttonB").click(function () {
     getMarketer();
});

【讨论】：

虽然这可能是一个有效的答案，但您更有可能通过解释代码的作用和工作原理来帮助他人。仅代码的答案往往受到较少的积极关注，并且不如其他答案有用。

【解决方案2】：

您在 ajax 中的选择器缺少 #。是$("marketerID").val()，应该是$("#marketerID").val();

这可能是问题吗？

【讨论】：

【解决方案3】：

更改此代码

$.ajax({
        url: "/home/GetOutBrainMarketers",
        data: { id: $("marketerID").val() },
        success: function (result) {
            var marketer = JSON.parse(result);
            document.getElementById("nameMarketer").innerHTML = (marketer.name);
        }
    });

通过这个：

$.ajax({
        url: "/home/GetOutBrainMarketers",
        data: { id: $("marketerID").val() },
        success: function (result) {
            var marketer = JSON.parse(result);
            $("#nameMarketer").html(marketer.name);
        }
    });

祝你好运

【讨论】：

【解决方案4】：

I think, you have to put the your js files at the end, so it wwil be like this: 


@{
    ViewBag.Title = "Home Page";
}
<br />
<div class="details">
    <label>Enter Marketer ID</label>
    <input type="text" class="form-control" id="marketerID">
    <input type="button" class="btn btn-default" value="OK" id="buttonB" />
    <section class="details">
        <div class="name">
            <label>Name</label>
            <label id="nameMarketer"></label>
        </div>
    </section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="~/Scripts/outBrain.js"></script>

我建议你使用@section，这样你的代码会更有条理。

【讨论】：