Jquery 错误 - 未捕获的错误：语法错误，无法识别的表达式

Question

I'm creating a website in Wordpress, and in a Custom Post Type with a little different input interface I thought this logical:

• List categories (taxonomies);
• List posts (channels) from this categories;
• If you click on a post, this post is added to a text field, if click again, it's removed;

The code works fine some time, but magically stops:

load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3 Uncaught Error: Syntax error, unrecognized expression: div# div.channel at Function.fa.error (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) at fa.tokenize (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) at fa.select (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) at Function.fa (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) at Function.a.find (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:10) at n.fn.init.find (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) at n.fn.init.a.fn.find (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:10) at a.fn.init.n.fn.init (load-scripts.php?c=0&load[]=utils,jquery-cor e,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) at new a.fn.init (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:10) at n (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3)

My code:

        <script>
        // Carrega as categorias de canais
        jQuery.get(
            'http://meusite.com/wordpress/wp-json/wp/v2/canais-categorias?per_page=100&orderby=name&order=asc',
            function(data){
                for(var i=0; i < data.length; i++){
                    jQuery('div#channels').append(
                        '<div class="row">'                                                                                     +
                            '<div class="col-12">'                                                                          +
                                '<h3>' + data[i].name + '</h3>'                                                     +
                            '</div>'                                                                                                        +
                        '</div>'                                                                                                            +
                        '<div class="row channel-grid" id="' +  data[i].slug + '">'     +
                        '</div>'
                    );
                }
            }, 'json'
        );

        // Carrega os canais
        jQuery.get(
            'http://meusite.com/wordpress/wp-json/wp/v2/canais?per_page=100&orderby=title&order=asc',
            function(data){
                for(var i=0; i<data.length; i++){
                    jQuery('div#' + data[i].categoria[0]).append(
                        '<div class="col-3" id="' + data[i].slug + '">'         +
                            '<div class="channel">'                                                     +
                                '<img src="' + data[i].channel_image + '">'         +
                                '<p>' + data[i].title.rendered + '</p>'                 +
                            '</div>'                                                                                    +
                        '</div>'
                    );
                }

                // Seleciona os caais ativos
                var channel_grid = jQuery('input#plan_channels_grid').val();
                var channel_grid = channel_grid.substring(0, channel_grid.length-1);
                var channel_grid = channel_grid.split(',');

                for(var i=0; i<channel_grid.length; i++){
                    jQuery('div#' + channel_grid[i] + ' div.channel').addClass('active');
                }

                // Adiciona e remove um canal com um clique
                jQuery('div.channel').click(function(){
                    var id = jQuery(this).parent().attr('id');

                    if(jQuery('div#' + id + ' div.channel').hasClass('active')){
                        jQuery('div#' + id + ' div.channel').removeClass('active');

                        var ch = jQuery('input#plan_channels_grid').val();
                        jQuery('input#plan_channels_grid').val(ch.replace((id + ','), ''));
                    }else{
                        jQuery('div#' + id + ' div.channel').addClass('active');

                        var ch = jQuery('input#plan_channels_grid').val();
                        jQuery('input#plan_channels_grid').val(ch + id + ',');
                    }
                });
            }, 'json'
        );
    </script>

Any idea?

Answer 1

div# div.channel is an invalid css selector. There is a space after the # which would make an invalid ID selector. So one of your string concatenations is either concatenating a string with a leading space, or you are concatenating a variable that is empty.

For instance with:

jQuery('div#' + id + ' div.channel')

if id is an empty string you will get the string the error mentions. Same with:

jQuery('div#' + channel_grid[i] + ' div.channel')

If channel_grid[i] is empty it will make an invalid css selector. Go back through your code and make sure your code is setup correctly to generate those variables and aren't generating empty strings. Or use error checking before attempting to use them.