时间戳

首页 > 解决方案 > Uncaught SyntaxError: missing ) 在参数列表生成点击事件的动态 HTML 之后

javascript - Uncaught SyntaxError: missing ) 在参数列表生成点击事件的动态 HTML 之后

问题描述

我正在使用 WordPress，单击按钮后，我必须在自定义帖子类型上显示动态字段。所以我使用了下面的代码

<?php 
  echo '<a href="javascript:void(0);" id="addMore_layout">Add more fields</a>';
  echo '<script>
     jQuery(function() {
      jQuery("#addMore_layout").click(function(e) {
       e.preventDefault();
       jQuery("#create_custom_layout").append("<div class=\'row\'><div class=\'col-md-6\'><h4>Description</h4>';
       $description1        = get_post_meta( $post->ID, 'pDescription', true );
         //Second ID the field.
       $description_field1  = 'pDescription';
         //Provide the settings arguments for this specific editor in an array
      $description_args1   = array('media_buttons' => false,'textarea_rows' => 12,'textarea_name' =>'pDescription[]','editor_class' =>'description-editor widefat', 'wpautop' => true);
      wp_editor($description1,$description_field1,$description_args1);
       echo'</div><div class=\'col-md-6\'><input type=\'button\' id=\'meta-image-button\' class=\'button\' value=\'Choose or Upload an Image\' style=\'padding: 8px 10px; height: auto; line-height: normal;\'/><input type=\'hidden\' name=\'pimage[]\' id=\'meta-image\' class=\'meta_image\' /><br /><img style=\'width: 100px;height: 100px;object-fit: cover;\' id=\'meta-image-preview\'  /></div></div>");
       
      })
    });
    
    </script>';
    ?>

现在，我的问题是当我单击添加更多字段时，我在控制台中收到错误

Uncaught SyntaxError: missing ) 在参数列表之后

我在这段代码中发现了问题

 `wp_editor($description1,$description_field1,$description_args1);`

我认为报价存在一些问题。

我在类名中遇到了同样的问题，我喜欢更改class=\'classname\'并且已经解决，但现在我在动态 HTML 生成中遇到了问题。

你能帮帮我吗？

查看源代码

<?php
echo '<script>
jQuery(function() {
  jQuery("#addMore_layout").click(function(e) {
   e.preventDefault();
   jQuery("#create_custom_layout").append("<div class='row'><div class='col-md-6'><h4>Description</h4><div id="wp-pDescription-wrap" class="wp-core-ui wp-editor-wrap tmce-active"><div id="wp-pDescription-editor-tools" class="wp-editor-tools hide-if-no-js"><div class="wp-editor-tabs"><button type="button" id="pDescription-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="pDescription">Visual</button>
<button type="button" id="pDescription-html" class="wp-switch-editor switch-html" data-wp-editor-id="pDescription">Text</button>
</div>
</div>
<div id="wp-pDescription-editor-container" class="wp-editor-container"><div id="qt_pDescription_toolbar" class="quicktags-toolbar"></div><textarea class="description-editor widefat wp-editor-area" rows="12" autocomplete="off" cols="40" name="pDescription[]" id="pDescription"></textarea></div>
</div>

</div><div class='col-md-6'><input type='button' id='meta-image-button' class='button' value='Choose or Upload an Image' style='padding: 8px 10px; height: auto; line-height: normal;'/><input type='hidden' name='pimage[]' id='meta-image' class='meta_image' /><br /><img style='width: 100px;height: 100px;object-fit: cover;' id='meta-image-preview'  /></div></div>");
   
  })
});


</script>';

?>

标签： javascriptphphtmljquerywordpress

解决方案

wordpress 函数返回"在其属性中使用的 html，这与 jQuery 函数中的 qoutes 冲突。它还增加了新的行，也是一个问题。
为 jQuery 参数使用模板文字以避免引用和换行问题。

<?php 
  echo '<a href="javascript:void(0);" id="addMore_layout">Add more fields</a>';
  echo '<script>
    jQuery(function() {
        jQuery("#addMore_layout").click(function(e) {
            e.preventDefault();
            jQuery("#create_custom_layout").append(`<div class=\'row\'><div class=\'col-md-6\'><h4>Description</h4>';
  $description1        = get_post_meta( $post->ID, 'pDescription', true );
  //Second ID the field.
  $description_field1  = 'pDescription';
  //Provide the settings arguments for this specific editor in an array
  $description_args1   = array('media_buttons' => false,'textarea_rows' => 12,'textarea_name' =>'pDescription[]','editor_class' =>'description-editor widefat', 'wpautop' => true);
  wp_editor($description1,$description_field1,$description_args1);
  echo'</div><div class=\'col-md-6\'><input type=\'button\' id=\'meta-image-button\' class=\'button\' value=\'Choose or Upload an Image\' style=\'padding: 8px 10px; height: auto; line-height: normal;\'/><input type=\'hidden\' name=\'pimage[]\' id=\'meta-image\' class=\'meta_image\' /><br /><img style=\'width: 100px;height: 100px;object-fit: cover;\' id=\'meta-image-preview\'  /></div></div>`);
       
          })
      });
    
  </script>';
  ?>

推荐阅读