Question

我们有一个div结构如下：

<!-- main.php starts -->
    <div class="main">
      <div class="one">
         <span class="buttonEdit">EDIT</span>
      </div>
      <div class="two">Content</div>
      <div class="editBox">
       <!-- abc.php which is loaded onClick -->
        <textarea class="editArea"></textarea>
        <span class="buttonSave">SAVE</span>
       <!--abc.php ends -->
      </div>
    </div>
<!-- main.php ends -->

我使用的jQuery是这样的：

$(document).ready(function() { 
        //SAVE BUTTON
        $(".buttonSave").click(function(){
            //AJAX SAVE HERE
            $.post("save.php",function(msg){
                var newContent;
                newContent = $(".editArea").val();

                $(this).parents(".main").find('.two').text(newContent);
             });
        });

流程： 单击EDIT按钮时，外部页面（ abc.php ）将通过jQuery的加载功能加载到div（ class =“editBox”）。编辑和保存后，textarea中的内容必须显示在div中（ class =“two”）。

重要有几个类似的块，类名相同。 jQuery是用 abc.php 编写的，它是一个外部文件。是否可以在AJAX中使用'find'和'this'？

需要解决方案：我们需要jQuery部分。急！

on jsFiddle：http://jsfiddle.net/JerryJones/PacTs/

Answer 1

试试这个

$.post('ajax.php',function(data){

   // write your retrived data here 
   $(".editArea").html(data retrived);
  //or
    $(".editArea").val(data retrived);

}

Answer 2

如果你给内容带有唯一ID的部分，那就容易多了。

然后，您可以使用按钮上的onClick（）来调用JavaScript函数：

function onEdit() {
    $("#EditBoxID".load('abc.php');
}

function onSave() {
    $("#ContentID").val($("#EditBoxID").val());
}

在AJAX发布后更新DIV内容

2 个答案: