1

我现在有点困惑，如果我把这个 jquery 放在我的网页上，一切正常。 

<script>
    $.get("/Recipe/SearchResult/", function (response) {
        $("#SearchResults").html(response);
    }); 
</script>

但是，我试图让这个在按钮上运行。所以我把它放在这样的函数中：

<script>    
    function Search() {
        $.get("/Recipe/SearchResult/", function (response) {
            $("#SearchResults").html(response);
        });
    };     
</script>

使用萤火虫，如果我在函数 Search{} { 上打断，当我点击按钮时，它会在该行打断。但是，如果我跨过去，它似乎不会运行 jquery。它只是转到下一行的函数末尾，没有任何反应。

编辑：这是有按钮的行：

<button onclick="Search"  type="submit" class="btn btn-success"><i class="icon-search"></i> Search</button>

有没有人有任何想法？

谢谢。

4

4 回答 4

3

这是因为您的按钮类型是提交，所以在单击按钮后，表单将返回并重新加载页面。尝试将其更改为 type="button"

<button onclick="Search"  type="button" class="btn btn-success"><i class="icon-search"></i> Search</button>
于 2012-07-15T04:11:36.473 回答
2

试试这个：

$('.btn-success').click(function(e){
   e.preventDefault();
   $.get("/Recipe/SearchResult/", function(response) {
      $("#SearchResults").html(response);
   });   
})
于 2012-07-15T03:57:46.690 回答
2

在您的调试器中，您必须在 line 上放置一个断点$("#SearchResults").html(response);。您不能直接单步执行它，因为稍后会在 ajax 请求完成时调用回调函数。ajax 调用的异步特性意味着您不能只是按顺序单步执行它。

即使回调函数看起来是顺序的，它也不是顺序执行的。该Search()函数完成，然后稍后调用回调。

于 2012-07-15T03:58:03.610 回答
2

首先你的内联onclick属性：

onclick="Search"

...没有调用该Search函数。你必须放括号：

onclick="Search()"

“使用萤火虫，如果我在函数 Search{} { 上打断，当我点击按钮时，它会在该行打断。但是，如果我跨过，它似乎不会运行 jquery。它只是转到下一行的函数结束，没有任何反应。”

该$.get()函数发出一个异步Ajax 请求，因此您提供的回调函数不应立即运行，一旦 Ajax 响应发生，它将由 jQuery 稍后调用。在此之前，无论 Ajax 响应返回多快，函数的其余部分都Search()将完成（尽管在您的情况下，函数中没有进一步的语句）。这很正常。尝试在该回调函数中放置一个断点，和/或console.log()在其中使用一条语句。

于 2012-07-15T04:00:07.947 回答