Question

因为，我是jQuery的新手，我在解析从ajax检索到的html数据时遇到了问题。

我有一个表单，它使用ajax发布表单数据并通过添加一个div（在与表单相同的页面上）将内容检索回该页面以显示该数据。

我想对该数据执行一些jQuery / Javascript操作，但由于我没有重新加载页面，jQuery或javascript无法解析该数据。

如何强制javascript或jquery重新整理整个页面而不加载它。

这是代码

HTML

<div class="col col-lg-9 search-data well">
            <div class="no-results">
                Search Results will appear here.
            </div>
        </div>

的jQuery

$('.search-form').click(function(e)
    {
        console.log('same-page');
        e.preventDefault();
        var form_var = this.form;
        var postData = $(this.form).serialize();
        var formURL = $(this.form).attr("action");
        $.ajax(
        {
            url : formURL,
            type: "POST",
            data : postData,
            success:function(data, textStatus, jqXHR) 
            {
                // console.log(data)
                $('.search-data').empty();  // Delete all child nodes
                $('.search-data').html(data); 
            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                $('.search-data').empty();  // Delete all child nodes
                $('.search-data').html(data);       
            }
        });
        return false;
    });

三江源

Answer 1

我的问题是如何对从服务器返回的数据执行jQuery操作。

如果你想在之前对HTML 做一些事情，你可以将它添加到页面中，你可以这样做：

var fragment = $(data);

这会将HTML解析为元素，并为这些元素提供一个jQuery包装器，不用将它们添加到页面的任何位置。然后，您可以使用jQuery操作它们。最后，当然，如果您希望它们出现在页面上，您必须将它们添加到页面的某个位置（通过html或append或类似的现有元素）。

数据有一些链接，我想解析那些链接，点击它们执行一些操作

你可以做到这一点。示例：Live Copy | Live Source

HTML片段：

<div> <a href="http://stackoverflow.com">Stack Overflow</a> <a href="http://w3schools.com" class="remove">w3schools</a> </div>

这是一个使用它的页面。在这种情况下，我删除了一个我们不想要的链接，并将click事件挂钩到剩下的链接上，然后将它们附加到页面：

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <meta charset=utf-8 /> <title>Modify HTML Before Appending</title> </head> <body> <script> $.ajax({ url: "http://jsbin.com/IsixODa/1", dataType: "html", success: function(data) { var fragment = $(data); // Remove some links we don't want fragment.find(".remove").remove(); // Hook the others fragment.find("a").click(function() { alert("You clicked a link: " + this.href); return false; }); // Put them on the page fragment.appendTo(document.body); }, error: function() { $("<p>Ajax call failed</p>").appendTo(document.body); } }); </script> </body> </html>

使用jquery在使用Ajax更新某个部分时重新分析html页面/部分内容

1 个答案: