$ .on（'click'）中的$ .ajax在页面加载期间运行

Question

最近，当我有一些新功能需要在点击事件中触发$ .ajax时，我有一些代码如下，

$('.ClickMe').on('click', function() {

   // Do something

   $.ajax({
     type: 'POST',
     url: 'Foo.aspx/BarWebMethod',
     data: '{}',
     contentType: 'application/jspn',
     dataType: 'json',
     success: function(data) {
       // Do good thing
     },
     error: function() {
       // Do something bad
     }

});

我意识到页面会在页面加载期间触发对我的WebMethod的AJAX调用并缓存所有结果，而不是在其类中使用“ClickMe”的某个单击元素中触发它。

功能方面它一切都很好，但由于我有大约数百个元素将与上面的代码挂钩，我当然不想运行那些数百个过多的AJAX调用。我想仅在用户点击任何元素时运行该段代码。

有什么想法吗？

Answer 1

您需要确保实际上没有以某种方式触发点击事件。

对于simplicitiy，我会使用.click而不是.on

$(document).ready(function() {
  $("#target").click(function() {
    alert("Handler for .click() called.");
  });
});

在$(document).ready中包装事件也将确保在绑定点击事件之前加载文档。

同时使用Firebug或Chrome开发者工具（F12是默认键绑定），可以查看重新加载页面时实际触发的网络请求。

使用这些工具，您应该能够更好地了解您的网页实际上在做什么。

Answer 2

除非单击某个类clickme，否则不会触发，传统方式是附加到文档就绪。

如果您不希望缓存关闭它，下面显示的是文档就绪的简写

$(function() {

  $.ajaxSetup({ cache: false });
  ...
  your click handler attached to element
});

Answer 3

将脚本放在此函数中

$(document).ready(function() {
  // Here goes your script.
});