jQuery函数没有被调用按钮

我有下面的标记/代码jQuery函数没有被调用按钮

<!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>

上的测试按钮的点击

我想SOAP请求被发送的点击，但由于某种原因当我点击按钮什么也没有发生，我可以确认它是jquery.js（2.1.1）。

我相信这是一个愚蠢的错误，但我没有看到它，我有的代码（这是一个重做版）工作正常，但这段代码没有。

任何帮助解决这个问题都很受欢迎。

来源

2014-09-22 user1383163

我已经收回我的'close'表决有多个问题（不只是简单的拼写错误）。希望所有现在都涵盖在下面:) – 2014-09-22 15:11:01

Typo #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还指出，脚本块不会出现有效。请检查太:)

来源

2014-09-22 14:42:42

我很好奇这是如何实际工作 - 它不会当我试图摆弄它。据我所知，从jQuery API中，这实际上是不是试图将处理程序绑定到每个按钮元素，并将#test作为数据传递给事件？ – 2014-09-22 14:54:12

@Ivo Coumans：'＃test'不是数据。它是针对在点击时应用的委托事件处理程序的过滤器。 – 2014-09-22 14:55:47

我并不是要与你相矛盾，但它不在jQuery文档中，它不适合我。你能提供一个工作jsfiddle吗？ – 2014-09-22 15:00:04

您可以使用的onclick简写为好，这将使你的代码稍微简单一些：

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

假设你想要的点击功能结合到所有按钮元素在你的页面上，但你可能只是希望它绑定到#test按钮。在这种情况下，你将不得不使用$("#test")代替：

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

来源

2014-09-22 14:47:14

我从代码中假定内容可能是动态的，所以留下了委托事件处理程序。 – 2014-09-22 14:50:06

另一种方法是使用简写：

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

来源

2014-09-22 14:48:48 rnevius

我从代码中假定内容可能是动态的，因此留下了委托事件处理程序。 – 2014-09-22 14:50:32

有趣的...你能多解释一下吗？我很好奇你的意思是“动态内容”，这将需要委托事件处理程序。 – rnevius 2014-09-22 14:52:05

如果页面内容被动态替换，普通事件处理程序将被断开连接，即使再次出现相同的ID，点击式绑定也将消失。委托事件处理程序在*不变的祖先*（默认'document'，如果没有其他可用的话）侦听冒泡事件，然后应用jQuery选择器。 – 2014-09-22 15:02:21

除了不具有#前缀，你似乎也在已经指向外部文件的脚本标记内写入代码，该代码省略了其中的所有内容。

<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）

来源

2014-09-22 14:52:35

+1：关于脚本块的好处...我越查看代码，我发现的问题就越多。注意：委托处理程序'$（“button”）。on（'click'，'＃test''）将不适用于动态内容，因为它需要绑定到一个*不变的*祖先。 – 2014-09-22 15:00:17

是的，这也是真的。 – 2014-09-22 15:01:42

jQuery函数没有被调用按钮

回答

相关问题