Question

我有以下标记/代码

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>

   <script src="directory for jquery script">
    $(document).ready(function () {
        $("button").on('click', 'test', function() {

            var webserUrl = "http://wsf.cdyne.com/WeatherWS/Weather.asmx";
            var soapRequest = '<ns1:GetWeatherInformation     xmlns:ns1=\'http://ws.cdyne.com/WeatherWS/\' />';
            $.ajax({
                type: "POST",
                url: webserUrl,
                contentType: "text/xml",
                dataType: "xml",
                data: soapRequest,
                success: SuccessOccur,
                error: ErrorOccur
            });
        });
    });
    function SuccessOccur(data, status, req) {
        if (status == "success")
            alert(req.responseText);
    }
    function ErrorOccur(data, status, req) {
        alert(req.responseText + " " + status);
    }
</script>

</head>
<body>



<button id="test">Test</button>

点击测试按钮我希望发送肥皂请求但由于某种原因，当我点击按钮没有任何反应时，我可以确认它正在点击jquery.js（2.1.1）。

我确定这是一个愚蠢的错误，但我没有看到它，我的代码（这是一个返工版本）工作正常，但这段代码没有。

非常感谢任何有关挑选问题的帮助。

Answer 1

错字#test。 id选择器需要#前缀。

$("button").on('click', '#test', function() {

是的，这是一个愚蠢的错误。我把这种情况称为代码失明..看了它这么久你再也看不到问题了：）

重要更新

您目前正在滥用委派的事件处理程序。我认为这有充分的理由（比如动态替换页面内容），否则你可以简化处理程序，但这太麻烦了。

当前处理程序无法在动态内容中生存，因为它直接绑定到button，然后应用过滤器。如果动态添加/替换按钮，则它们不会绑定到新按钮。

适当的委托事件处理程序将是

$(document).on('click', 'button#test', function() {

或者，因为它是id查找，只需

$(document).on('click', '#test', function() {

委托事件处理程序通过侦听事件（在这种情况下为click）冒泡到不变祖先（document，如果没有其他方便的话）来工作。从不使用'body'由于样式问题导致点击错误，然后它将jQuery选择器应用于冒泡元素，然后它将函数应用于导致事件的任何匹配元素。这将允许它处理代码运行时不存在的元素，但在事件发生时将存在（非常方便）。

注意：

正如Pete TNT也指出的那样，脚本块似乎没有效果。请检查一下：）

Answer 2

除了没有#前缀之外，您似乎还在脚本标记内部编写已经指向外部文件的代码，该代码会忽略其中的所有内容。

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

     $(document).ready(function () {
            $(document).on('click', '#test', function() {
                /* and so on */
            });
      });
</script>

（除非您使用的是Resigs degrading script-tags）

Answer 3

您也可以使用onclick的简写，这将使您的代码更简单：

$("button").click(function() {
    // body here
});

假设您希望click函数绑定到页面上的所有按钮元素，但您可能只希望它绑定到#test按钮。在这种情况下，您必须使用$("#test")代替：

$("#test").click(function() {
    // body here
});

Answer 4

另一种选择是使用简写：

$('#test').click(function() {
    // Oh yeah
});

单击按钮时不调用JQuery函数

4 个答案: