Question

我为自定义窗口小部件创建的Javascript出现了问题。

这是我从javascript到我在小部件中如何调用的代码。

Custom.js

     var wrapper = $('#wrapper');   
     $.ajax({
      method: "POST",
      url: "https://api.graphcms.com/simple/v1/SampleAPI",
     contentType: "application/json",
     headers: {
     Authorization: "bearer ******"
   },
   data: JSON.stringify({query: "query  { allProducts { id title } }"})
    }).done(function(data) {

    for( var key in data ) {

 for (var i = 0; i<data[key].allProducts.length; i++)
 {
     console.log(data[key].allProducts[i]);
     container = $('<div id="data" class="container"></div>');
     wrapper.appendTo(container);
     container.appendTo('<input type=checkbox name="id" value=' + 
      data[key].allProducts[i].id + '>' + data[key].allProducts[i].title  );             
 }   

}

functions.php

这是在模板的functions.php文件中调用Jquery的方式：

   function jquery_import() {

      wp_deregister_script('jquery');
      wp_register_script('jquery',https://ajax.googleapis.com/ajax/libs/3.3.1/jquery.min.js', array(), '3.3.1', true);  
       wp_enqueue_script('jquery');

   }
  add_action( 'wp_enqueue_scripts', 'jquery_import' );

这是我调用自定义javascript文件的方式：

   function custom_wp_enqueue_scripts() {

    wp_register_script( 'custom', get_template_directory_uri() . '/assets/js/custom.js', array( 'jquery' ), NULL, false );
     wp_enqueue_script( 'custom' );

   }    
  add_action('wp_enqueue_scripts', 'custom_wp_enqueue_scripts');

我的自定义小部件

最后，在我的小部件中，以下是div语句：

   <div id="wrapper"> </div>

基于我的JavaScript，有数据输入，但是该信息未显示在我的窗口小部件中。为什么它没有显示在我的窗口小部件中？

谢谢你，凯文·戴维斯

Answer 1

您向后添加了appendTo ...而不是将其附加到包装器，而是将包装器附加到仅存在于javascript中而不存在于dom上的元素。尝试添加而不是appendTo

Answer 2

好吧，我添加了一个$（function（）{....}），并显示输出。

WordPress自定义小部件-Javascript输出未显示

2 个答案: