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 回答