Question

我的情况：我有一个元素，通过AJAX将搜索结果加载到元素中。 HTML

<input class="search">
<div class="search-results">
  // in default is empty
  // after search add <a></a>
</div>

jquery的

$("input.search").change(function() {
   $(".search-results").append('<div class="searchResultsOverlay"></div>');
});

如何在结果加载后附加（jquery）elemtent？我试着改变输入，但这是部分解决方案。当我使用.change函数时，append正在输入或单击外部输入，但如果我将光标放在输入中，结果将被加载并追加等待操作（输入，单击）。

如何在Ajax添加内容后调用jQuery？

THX

Answer 1

$.ajax()返回一个jqXHR对象，其中包含Promise的所有方法。因此，您可以在返回XHR的结果时使用.done(function( data, textStatus, jqXHR ) {})执行代码。

作为一个例子......

$.ajax({
    url: "http://fiddle.jshell.net/favicon.png",
    beforeSend: function( xhr ) {
        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
    }
})
.done(function( data ) {
    if ( console && console.log ) {
        console.log( "Sample of data:", data.slice( 0, 100 ) );
    }
});

以下是jqXHR对象提供的其他一些方法

jqXHR.done(function( data, textStatus, jqXHR ) {});
jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });
jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});

请点击此处了解有关每个内容的更多信息：http://api.jquery.com/jquery.ajax/#jqXHR

Answer 2

使用JQuery的keyup事件

<!DOCTYPE html>
<html>
<head>
<title>Useless Show English</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript">
    function nickname() {
        var a = window.prompt("Please enter your nick name:");
        if(a == "" || a == null || /*alt 0160*/a == " " || a == " ")
        document.write("Error!");
        else
        document.write("Hello," + " " + a + "!");   
        document.write("</br>");
        document.write("<a href=\"uselessshow_select.html\"><button style=\"font-family: Arial, Helvetica, sans-serif;background-color: black;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;\">Back to the maine page<\/button>");
        document.write("<a href=\"uselessshow.html\"><button style=\"font-family: Arial, Helvetica, sans-serif;background-color: black;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;\">Back to the previous page<\/button>");

}       
</script>
<button class="button" onclick="nickname()">If you want to start the script, please click here</button>
<a href="uselessshow_select.html"><button class="button">Back</button></a>
</body>
</html>

Answer 3

在ajax数据对象中声明属性success，它是回调函数。然后在success的块中执行任何操作。

$.ajax({
    success: function(response) {
        /* Whatever; response is the server response */
    }
});

jquery在ajax内容后追加

3 个答案: