child theme - Javascript File Does Not Work

admin管理员组

文章数量:1277568

I created a page independent from the theme and added the php and js files of the pageto the theme folder, the php file works but the js file does not. Why could it be?

PHP File:

<?php
  if (!is_user_logged_in()) {
    wp_redirect(esc_url(site_url('/')));
    exit;
  } else{ 
  get_header();
  get_sidebar( 'left' );
?>
   <div id="primary" class="content-area region__col region__col--2">
    <main id="main" class="site-main">
        
      <div class="create-prediction">
        <h2 class="headline headline--medium">Guess Now</h2>
        <input class="new-prediction-title" placeholder="Title">
        <textarea class="new-prediction-body" placeholder="Your guess here..."></textarea>
        <span class="submit-prediction">Guess</span>
      </div>
      <ul class="min-list link-list" id="prediction">
          
<?php 
          $userPredictions = new WP_Query(array(
            'post_type' => 'prediction',
            'posts_per_page' => -1,
            'author' => get_current_user_id()
          ));
          while($userPredictions->have_posts()) {
            $userPredictions->the_post(); ?>
            <li data-id="<?php the_ID(); ?>">
              <input class="prediction-title-field" value="<?php echo esc_attr(get_the_title()); ?>">
              <span class="edit-prediction"><i class="fa fa-pencil" ></i> Edit</span>
              <span class="delete-prediction"><i class="fa fa-trash-o" ></i> Delete</span>
              <textarea class="prediction-body-field"><?php echo esc_html(get_the_content()); ?></textarea>
              <span class="update-prediction btn--blue btn--small"><i class="fa fa-arrow-right"></i> Save</span>
            </li>
<?php  
        }
?>
      </ul> 
    </main>
   </div>
    
<?php 
  get_sidebar( 'right' );
  get_footer();
  }
?>

Javascript File:

class prediction {
  constructor() {
    this.events()
  }

  events() {
    $("#prediction").on("click", ".delete-prediction", this.deletePrediction)
    $("#prediction").on("click", ".edit-prediction", this.editPrediction.bind(this))
    $("#prediction").on("click", ".update-prediction", this.updatePrediction.bind(this))
    $(".submit-prediction").on("click", this.createPrediction.bind(this))
  }

  editPrediction(e) {
    var thisPrediction = $(e.target).parents("li")
    if (thisPrediction.data("state") == "editable") {
      this.makeNoteReadOnly(thisPrediction)
    } else {
      this.makeNoteEditable(thisPrediction)
    }
  }

  makeNoteEditable(thisPrediction) {
    thisPrediction.find(".edit-prediction").html('<i class="fa fa-times" aria-hidden="true"></i> Cancel')
    thisPrediction.find(".prediction-title-field, .prediction-body-field").removeAttr("readonly").addClass("prediction-active-field")
    thisPrediction.find(".update-prediction").addClass("update-prediction--visible")
    thisPrediction.data("state", "editable")
  }

  makeNoteReadOnly(thisPrediction) {
    thisPrediction.find(".edit-prediction").html('<i class="fa fa-pencil" aria-hidden="true"></i> Edit')
    thisPrediction.find(".prediction-title-field, .prediction-body-field").attr("readonly", "readonly").removeClass("prediction-active-field")
    thisPrediction.find(".update-prediction").removeClass("update-prediction--visible")
    thisPrediction.data("state", "cancel")
  }

  deletePrediction(e) {
    var thisPrediction = $(e.target).parents("li")

    $.ajax({
      beforeSend: xhr => {
        xhr.setRequestHeader("X-WP-Nonce", prediction.nonce)
      },
      url: "/" + thisPrediction.data("id"),
      type: "DELETE",
      success: response => {
        thisNote.slideUp()
        console.log("Congrats")
        console.log(response)
        if (response.userNoteCount < 5) {
          $(".prediction-limit-message").removeClass("active")
        }
      },
      error: response => {    
        console.log("Sorry")
        console.log(response)
      }
    })
  }

  updatePrediction(e) {
    var thisPrediction = $(e.target).parents("li")

    var ourUpdatedPost = {
      "title": thisPrediction.find(".prediction-title-field").val(),
      "content": thisPrediction.find(".prediction-body-field").val()
    }

    $.ajax({
      beforeSend: xhr => {
        xhr.setRequestHeader("X-WP-Nonce", prediction.nonce)
      },
      url: "/" + thisPrediction.data("id"),
      type: "POST",
      data: ourUpdatedPost,
      success: response => {
        this.makeNoteReadOnly(thisPrediction)
        console.log("Congrats")
        console.log(response)
      },
      error: response => {
        console.log("Sorry")
        console.log(response)
      }
    })
  }

  createPrediction(e) {
    var ourNewPost = {
      "title": $(".new-prediction-title").val(),
      "content": $(".new-prediction-body").val(),
      "status": "publish"
    }

    $.ajax({
      beforeSend: xhr => {
        xhr.setRequestHeader("X-WP-Nonce", prediction.nonce)
      },
      url: "/",
      type: "POST",
      data: ourNewPost,
      success: response => {
        $(".new-prediction-title, .new-prediction-body").val("")
        console.log("Congrats")
        console.log(response)
      },
      error: response => {
        if (response.responseText == "You have reached your prediction limit.") {
          $(".prediction-limit-message").addClass("active")
        }
        console.log("Sorry")
        console.log(response)
      }
    })
  }
}

exports = {prediction}

I added enqueue script in functions.php file.

function predictionjs() { wp_enqueue_script( 'prediction', get_template_directory_uri() . '/assets/js/libs/prediction.js', array( 'jquery' ), '3.6.0', true ); } add_action( 'wp_enqueue_scripts', 'predictionjs'); 

本文标签： child themeJavascript File Does Not Work