javascript - 用于获取 id 元素的子目录的 Jquery .click 函数

Question

我尝试构建一个具有 3 个类别级别的汽车搜索插件。比如：1 行 = Maincat，2 行 = Subcat，3 行 = Subsubcat...

这是我想做的一个例子： https ://www.aez-wheels.com/3DKonfigurator/index.php?lcs=onz2sm13at&lng=en

在我的代码中，第一级出现，第二级加载。但第三级没有加载。我认为问题在于，第二行是动态创建的。有人可以告诉我哪里有错误的代码吗？

   // Loading WordPress hooks
    function __construct()
    {
        add_action( 'avada_after_header_wrapper', array($this, 'llm_car_conf_list') );

        // Register ajax action
        add_action( 'wp_ajax_get_cat', array($this, 'getCat') );


        // Register ajax action for non loged in user
        add_action('wp_ajax_nopriv_get_cat', array($this, 'getCat') );


    }

// function for the maincat
function llm_car_conf_list() { 
            if ( is_front_page() ) {?>

            <div class="llm_car_container">
                <div class="car_wrapper">
                    <div class="car_row">
                        <div class="car_title"><h2>1. Fahrzeug wählen</h2></div>
                        <ul id="maincat" class="car_conf"><?php

            $categories = get_categories(array (
            'taxonomy'      => 'product_cat',
            'parent'        => 0
            ));

            foreach ( $categories as $category ) {
            printf( '<li class="car_list_item"><a id="%1$s">%2$s</a></li>',
                esc_html ($category->term_id ),
                esc_html( $category->cat_name )
                  );
            }
?></ul></div>

// Jquery to load first subcat
<script type="text/javascript">
                (function($){
                    $("#maincat li").click(function(){
                        $("#second_row").empty();
                        $.ajax({
                            type: "post",
                            url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
                            data: { action: 'get_cat', cat_id: $(this).find('a').attr('id') },
                            success: function(data) {
                                $("#second_row").append(data);
                            }
                        });
                    });
                })(jQuery);
            </script>
    <div class="car_row">
    <div class="car_title"><h2>2. Typ wählen</h2></div>
    <ul id="second_row" class="car_conf"></ul>
    </div>

    // Jquery to load subsubcat
 <script type="text/javascript">
                (function($){
                    $("#second_row li").click(function(){
                        $("#third_row").empty();
                        $.ajax({
                            type: "post",
                            url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
                            data: { action: 'get_cat', cat_id: $(this).find('a').attr('id') },
                            success: function(data) {
                                $("#third_row").append(data);
                            }
                        });

                    });
                })(jQuery);
            </script>
    <div class="car_row">
    <div class="car_title"><h2>3. Jahrgang wählen</h2></div>
    <ul id="third_row" class="car_conf"></ul>
    </div>

 </div>
 </div>
 <?php 
            }
 }


    // Function to load the subcats

    function getCat() {
        $categories = get_categories(array (
            'taxonomy'      => 'product_cat',
            'child_of'      => $_POST['cat_id'],
            'parent'        => $_POST['cat_id']
        ));

        foreach ( $categories as $category ) {
            printf( '<li id="%1$s" class="car_list_item"><a id="%1$s">%2$s</a></li>',
                esc_html ($category->term_id ),
                esc_html( $category->cat_name )
                  );
            }    
        die();
    }

标签： javascriptphpjqueryajaxwordpress

Answer 1

这是我的完整代码，适用于我的插件

<?php
defined('ABSPATH') or die("Thanks for visting");

if ( ! class_exists( 'frontendAjaxDdown' ) ):
    class frontendAjaxDdown
    {


         // Loading WordPress hooks
        function __construct()
        {
            add_action( 'avada_after_header_wrapper', array($this, 'llm_car_conf_list') );

            // Register ajax action
            add_action( 'wp_ajax_get_cat', array($this, 'getCat') );
            add_action( 'wp_ajax_get_subcat', array($this, 'getSubCat') );
            add_action( 'wp_ajax_get_subsubcat', array($this, 'getSubSubCat') );



            // Register ajax action for non loged in user
            add_action('wp_ajax_nopriv_get_cat', array($this, 'getCat') );
            add_action('wp_ajax_nopriv_get_subcat', array($this, 'getSubCat') );
            add_action('wp_ajax_nopriv_get_subsubcat', array($this, 'getSubSubCat') );



        }

function llm_car_conf_list() { 
    if ( is_front_page() ) {?>

        <div class="llm_car_container">
           <div class="car_wrapper">
             <div class="car_row">
                 <div class="car_title"><h2>1. Fahrzeug wählen</h2></div>
                 <ul id="maincat" class="car_conf"><?php

                    $categories = get_categories(array (
                    'taxonomy'      => 'product_cat',
                    'hide_empty'    => 1,
                    'parent'        => 0
                    ));

                    foreach ( $categories as $category ) {
                    printf( '<li class="car_list_item"><a id="%1$s"><img src="http://climair-schweiz.ch.185-117-169-242.srv201.webpreview.ch/wp-content/uploads/carbrands/%2$s.png" width="20px">%2$s</a></li>',
                        esc_html ($category->term_id ),
                        esc_html( $category->cat_name )
                    );
                    } ?>
                </ul>
                </div>

                <script type="text/javascript">
                        (function($){
                            $("#maincat li").click(function(){
                                $("#second_row, #third_row, #fourth_row").empty();
                                $.ajax({
                                    type: "post",
                                    url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
                                    data: { action: 'get_cat', cat_id: $(this).find('a').attr('id') },
                                    success: function(data) {
                                        $("#second_row").append(data);
                                    }
                                });
                            });
                        })(jQuery);
                </script>
                <div class="car_row">
                  <div class="car_title"><h2>2. Model wählen</h2></div>
<ul id="second_row" class="car_conf"></ul>
                </div>


                <div class="car_row">
                  <div class="car_title"><h2>3. Baujahr | Typ wählen</h2></div>
                  <ul id="third_row" class="car_conf"></ul>
                </div>

                <div class="car_row">
                  <div class="car_title"><h2>4. Form | Türen wählen</h2></div>
                  <ul id="fourth_row" class="car_conf"></ul>
                </div>

           </div>
        </div> <?php 
    }
}

function getCat() {

    $categories = get_categories(array (
        'taxonomy'      => 'product_cat',
        'hide_empty'    => 1,
        'child_of'      => $_POST['cat_id'],
        'parent'        => $_POST['cat_id']
    ));

    foreach ( $categories as $category ) {
        printf( '<li id="%1$s" class="car_list_item"><a id="%1$s">%2$s</a></li>',
            esc_html ($category->term_id ),
            esc_html( $category->cat_name )
        );
    } ?>
    <script type="text/javascript">
        (function($){
            $("#second_row li").click(function(){
                $("#third_row, #fourth_row").empty();
                $.ajax({
                    type: "post",
                    url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
                    data: { action: 'get_subcat', cat_id: $(this).find('a').attr('id') },
                    success: function(data) {
                        $("#third_row").append(data);
                    }
                });

            });
        })(jQuery);
    </script> <?php
    die();
}

function getSubCat() {
    $categories = get_categories(array (
        'taxonomy'      => 'product_cat',
        'hide_empty'    => 1,
        'child_of'      => $_POST['cat_id'],
        'parent'        => $_POST['cat_id']
    ));

    foreach ( $categories as $category ) {
        printf( '<li id="%1$s" class="car_list_item"><a id="%1$s">%2$s</a></li>',
            esc_html ($category->term_id ),
            esc_html( $category->cat_name )
              );
        }
    ?> <script type="text/javascript">
            (function($){
                $("#third_row li").click(function(){
                    $("#fourth_row").empty();
                    $.ajax({
                        type: "post",
                        url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
                        data: { action: 'get_subsubcat', cat_id: $(this).find('a').attr('id') },
                        success: function(data) {
                            $("#fourth_row").append(data);
                        }
                    });

                });
            })(jQuery);
        </script> <?php
    die();
}

function getSubSubCat() {
    $categories = get_categories(array (
        'taxonomy'      => 'product_cat',
        'hide_empty'    => 1,
        'child_of'      => $_POST['cat_id'],
        'parent'        => $_POST['cat_id']
    ));

    foreach ( $categories as $category ) {
        printf( '<li class="car_list_item"><a href="%1$s">%2$s</a></li>',
        esc_url( get_category_link( $category->term_id ) ),
            esc_html( $category->cat_name )
              );
        }

    die();
}

}
endif;
new frontendAjaxDdown();
?>