Wordpress AJAX，jQuery部分发送数据，但PHP函数未运行

Question

Here is the jquery portion to call the ajax function when someone clicks the a tag element. What I want to do is take the data value from that a tag element, pass it into the php function, and run the php function using the passed in string variable. The Jquery portion works, I can send the data value, but the PHP function doesn't even run, not sure what I'm doing wrong.

$(function(){
  $('#catFilter a').on('click', function(e){
    e.preventDefault();
    $(this).fadeOut(300);
    var x = $(this).attr('data-slug');
    var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';

  $.ajax({
    url: ajaxurl,
    type: 'post',
    data: {data: x, action: 'filter'},
    success: function(data, status) {
      console.log(x);
    },
    error: function(xhr, desc, err) {
      console.log(xhr);
      console.log("Details: " + desc + "\nError:" + err);
    }
    }); // end ajax call
  });
});

And the PHP portion, I want to add the data value from the A tag element into the PHP array, and then run the function with the passed in parameters.

function filter(){
  $x = $_POST['data'];
  array_push($needleArray, $x);
  post_filter();
  die();
}
add_action('wp_ajax_filter', 'filter');
add_action('wp_ajax_nopriv_filter', 'filter');

Answer 1

Wordpress uses jQuery noConflict mode in-order to avoid conflict with other javascript libraries that may uses the symbol $. You need to change from this:

$(function(){
    // your code
});

To this:

jQuery(function($){
  // your code
});

This is the safe way to use jQuery. https://developer.wordpress.org/reference/functions/wp_enqueue_script/#user-contributed-notes