JQUERY 单击 function 在 javascript 文件中不起作用

Question

JQUERY on Click function not working inside JavaScript file of WordPress AJAX Call. The function alert() outside of the click function is working. But inside not, But everything setup okay for AJAX Call. the script file called correctly in the webpage.

var columnfiltertext, column_filter_number;
jQuery(document).ready(function(){
  //jQuery('span.filter-option').on('DOMSubtreeModified',function(){
  jQuery('span.filter_column.filter_select').click(function(){
    alert("okay");
    column_filter_number = jQuery(this).attr("data-index");
    columnfiltertext = jQuery(this).find("span.filter-option").text();
    if(columnfiltertext)
    {
      if(columnfiltertext != " ")
      {
        //document.cookie = "columnfiltertext= ; expires = Thu, 01 Jan 1970 00:00:00 GMT";
        //setCookie("columnfiltertext", columnfiltertext , 1);
        //alert("Cookie is: " + getCookie("columnfiltertext"));
        if(column_filter_number)
        {
          alert(column_filter_text); 
          //alert(column_filter_number);
        }
      }
    }
    jQuery.ajax({
      url: example_ajax_obj.ajaxurl,
      data: {
        'action': 'example_ajax_request',
        'fruit' : fruit,
        'nonce' : example_ajax_obj.nonce
      },
      success:function(data) {
        // This outputs the result of the ajax request
        //console.log(data);
        alert(data);
      },
      error: function(errorThrown){
        //console.log(errorThrown);
        alert(errorThrown);
      }
    });  
  });
});

Filename: simple-ajax-example.js

Answer 1

If your alert("okay") is not reachable, then it might be the case that your selector ie jQuery('span.filter_column.filter_select') might not be returning anything. You may try that in your browser console if it returns anything, just past jQuery('span.filter_column.filter_select') in console if your DOM is already rendered.