Question

我在页面上有一些结果（第10章），然后使用“加载更多结果”按钮，我将上一个报告的“id”发送到PHP页面。

我在这里读到我必须使用.on（因为.live已被折旧），因此添加到DOM（通过AJAX）的新元素上的click事件可以正常工作。

我的问题是......我能以某种方式显示通过AJAX在不在初始DOM上的div上传来的内容吗？

$("#jokesWrap").on('click', 'a.share', function(event) {        

var joke_id = $(this).attr('name');

var msgbox = $("#success[name='" + joke_id + "']");

$("#post-to-wall[name='" + joke_id + "']").hide();

msgbox.html('<img src="includes/images/load.gif">&nbsp; Loading...');

$.ajax(
    {
        type: "POST", 
        url: "includes/php/ajax.php", 
        data: "joke_id=" + joke_id, 
        success: function(msg)
            {
                if(msg == 'OK')
                    {
                        msgbox.html('<img src="includes/images/success.png" /> DONE!');
                    }
            } // function(msg)
    }); // ajax

event.preventDefault(); });

这是HTML部分：

<div id="jokesWrap">

<div class="joke" id="1">
    <p class="txt">
        some text
    </p>
    <div class="joke-options-bar">
        <a href="#" id="post-to-wall" class="share tip-this floatL" name="1" title="Post to wall">Post to wall</a>
        <span id="success" name="1" class="share floatL"></span>
        <br class="floatClear" />
    </div>
</div>
// the above area comes through loop from the ajax call

PS：一切都很好：ajax调用（tetxt贴在墙上）#post-to-wall被隐藏了。 “loding ......”以及未显示的成功消息。

PS2：在AJAX调用之前点击DOM上的链接时显示的“正在加载...”文本和成功消息（因为#success就在那里）

任何帮助都很明白！

Answer 1

在写入之前将其添加到DOM中？

Answer 2

只要在执行AJAX的success回调时DOM中存在元素，就可以使用jQuery以与执行的元素相同的方式选择和操作它/ strong>最初加载页面时存在于DOM中。或者您可以使用jQuery创建元素作为success回调的一部分，使用来自AJAX请求的响应对其进行操作，然后将新创建的元素追加到所需位置的DOM中。像这样：

var div = $('<div/>').attr('id', 'new-div-id').html(data); $('body').append(div);

这会创建一个新的div，为id提供new-div-id，然后将其innerHTML设置为data为什么（假设data是包含来自AJAX的响应文本的变量的名称，然后最后将其作为页面的<body>标记的新子项附加。

查看似乎编辑的问题：元素ID（使用id属性指定）在整个文档中必须是唯一的;其中包含稍后作为AJAX回调的一部分添加的元素。您不能拥有id success的多个元素 - 通过取消name属性使其唯一，并将值添加到{{1}的末尾相反，所以你有id作为你的身份。

将ajax响应保存到DOM上没有的元素

2 个答案: