将数据传递到另一个php文件以更新数据库的Jquery Ajax只允许更新一次(Wordpress）

我正试图使用POST方法将数据重定向到Wordpress中一个名为functions.php的文件。它可以将从文本框中检测到的数据发送到该文件，并使用wp_send_json（$_POST）获取返回值。在获得返回值后，段落的值可以更改为新值。但它只允许我更新一次，除非页面正在刷新或重新加载。我做错了什么或错过了什么？下面是我对这个过程的代码。

functions.php

function test_load(){
    if(isset($_POST) && $_POST['element'] == 'header')
    {
        $name = $_POST['name'];
        $hidden = $_POST['hidden'];
        if( $hidden == 'tagline')
        {
            update_option( 'wpbst_tagline', $name );
        }
        else if( $hidden == 'footer')
        {
            update_option( 'wpbst_footer', $name );
        }
        wp_send_json($_POST);
    }
}
add_action('init', 'test_load');

脚本

<script>
  $(document).ready(function(){
    function custom_update_box( id ) {
        $(id).click(function () {
          if(id == '#tagline')
          {
            var dynamicDialog = $('<div>' <label>' Tagline :' </label>'  <input type="hidden" value="tagline" id="hidden">' <input  id="update" class="form-control" type="textbox" value=''' + $(this).html().trim() + '''/>' </div>');
            title = "Update Tagline";
          }
          else if(id == '#logo')
          {
            var dynamicDialog = $('<div>' <label>' Logo :' </label>'  <input type="hidden" value="logo" id="hidden">' <input id="update" class="form-control" type="textbox" value=''' + $(this).html().trim() + '''/>' </div>');
            title = "Update Logo";
          }
          else if(id == '#footer')
          {
            var dynamicDialog = $('<div>' <label>' Logo :' </label>'  <input type="hidden" value="footer" id="hidden">' <input id="update" class="form-control" type="textbox" value=''' + $(this).html().trim() + '''/>' </div>');
            title = "Update Footer";
          }
          dynamicDialog.dialog(
          { 
            title: title, 
            modal: true, 
            buttons: {
                'Submit': function(e) {
                  console.log(e);
                  $.ajax({
                    type: "POST",
                    data: { name: $("#update").val() , hidden: $("#hidden").val() , element: "header"}
                  }) 
                  .done(function(msg) {
                    console.log($("#update").val());
                    if(id == '#tagline')
                      $(id).html(msg.name);
                    else if(id == '#logo')
                      $(id).html(msg.name);
                    else if(id == '#footer')
                      $(id).html(msg.name);
                  });
                  $(this).dialog('close');
              },
                'Cancel': function() {
                $(this).dialog('close');
              }
            }
          });
      });
    }
    custom_update_box("#tagline");
    custom_update_box("#logo");
    custom_update_box("#footer");
  });
</script>

HTML

    <center>
      <span id="logo" class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">
        <?php echo $logo_decode->wpbst_logo_initial; ?>
      </span>
        <td>
          <p id="tagline" name="blogdescription" class="lead"><?php echo $result_tagline;?></p>
          <input id="tagline" type="hidden" name='blogdescription' value=<?php echo '"'.$result_tagline.'"';?> />
        </td>
      <p class="lead">
        <a id="button" class="btn btn-outline-inverse btn-lg" href=""><?php echo $button_decode->wpbst_button_name;?></a>
      </p>
    </center>