使用ajax时样式问题答案

【问题标题】：Trouble with Styling when using ajax使用ajax时样式问题
【发布时间】：2013-07-08 17:50:59
【问题描述】：

我正在使用 JQuery 和 AJAX 提交和处理来自。当用户点击like按钮时，信息通过AJAX发送到我的like.php文件。 like.php 文件处理请求并为不同的按钮创建 html。我的 Success 函数将 html 用于 like 按钮，并用新的 like 按钮替换 like 按钮。除了，当我用 AJAX 和 JQuery 替换 like 按钮时，like 按钮的结构就消失了。我可能做错了什么？

JQuery 和 AJAX：

$(document).ready(function() {
    $(".like-form").submit(function() {

        var dataString = $(this).serialize();
        var $this = $(this);
        $.ajax({  
            type: "POST",  
            url: "like.php",  
            data: dataString,
            success: function(html) {
                $this.replaceWith(html);
            }
        }); 

        return false; 

    });
});

原始表格：

<form class="like-form" method="post" action="">
    <div class="post-button">
        <button type="submit" type="submit" name="like"  
        class="like-button"/><p> Like </p></button>
    </div>
</form>

点赞.php：

// Code to process the form

//This replaces the original form on submit
<form class="like-form" method="post" action="">
    <div class="post-button">
        <button type="submit" type="submit" name="unlike"  
        class="like-button"/><p> Unlike </p></button>
    </div>
</form>

【问题讨论】：

尝试在添加不同按钮后增强标记 - $(document).ajaxComplete(function(){ try{ FB.XFBML.parse(); }catch(ex){} });
你的意思是“......不像按钮的结构消失了......” - 你的意思是没有放入表单？
它失去了它的样式
@Ross - 这是 XFBML 还是纯定制的 HTML？
您是否将button 元素上的[name="like"] 属性用于样式设置？

标签： jquery ajax

【解决方案1】：

可能这在喜欢和不喜欢的情况下都不是正确的 HTML：

<form class="like-form" method="post" action="">
    <div class="post-button">
        <button type="submit" name="Unlike" class="like-button"/>
<!-- two "type="
          closed with /> and an additional </button> at the end
-->
    </div>
</form>

尝试用$this.html(html);更改内容

【讨论】：