Problem getting .js file to load via a plugin

Question

This http://jsfiddle.net/ambiguous/7L4WZ/ works...it removes empty <p></p> tags and then some but I can not git it to work from my plugin.

    $('p').each(function() {
        var $this = $(this);
        if($this.html().replace(/\s| /g, '').length == 0)
            $this.remove();
    });

WP loads jquery automatically so, can I just load the .js file say from the main plugin file like this:

<script type="text/javascript" src="<?php plugin_dir_url( __FILE__ ); ?>js/jquery.js"></script>

Or do I need to use wp_enqueue_script()?

When I run it as a <script> it loads as the very first line, even before <!DOCTYPE> but gives off this error when the script is loaded:

jquery.js:1SyntexError: Unexpected token '<'
jquery.js:-1Resource interpreted as Script but transferd wiht MINE type text/html

Inside the jquery.js file I get this error:

jquery.js:6SuntaxError: Invalid character '/u8203'

When I load in under wp_enqueue_script() I do not get the twp page errors as above but I still get the same error then in the .js file:

jquery.js:6SuntaxError: Invalid character '/u8203'

for Chip...

myCoolPlugin.php is loaded when the plugin is activated and here is the part that deals with the .js file.

above I just define some variables...then

    add_action('wp_enqueue_scripts', 'add_stylesscripts');

    function add_stylesscripts() {

        // css:

            // here I load a some stylesheets...removed for sapce

      // javascript
            wp_register_script( 'wlmm-js_custom', plugin_dir_url( __FILE__ ) . 'js/jquery.js', false );
            wp_enqueue_script ('wlmm-js_custom');
    }

and then I include some other files...end

The .js file is loading like it should when enqueued but there is a script error in the .js code but the .js code works fine in jsfiddle.

So my question is:

1) am I enqueueing the .js properly 2) do I even need to enqueue the .js file and should I run it as a 3) why does the .js code work in jsfiddle but not when I load via my plugin?

Answer 1

Your javascript has an invalid character in it that can't be rendered by most fonts, unicode 8203, which is why you don't see it. If I copy your code out of jsfiddle, paste it in a js file, then drop it in a browser, I can see the character on the last line.

As far as your enqueue question is concerned- yes, you should enqueue files rather than inject a script tag directly.

Two potential issues I see with your enqueue though-

You're not setting jQuery as a dependency. Your script will fail if jQuery isn't enqueued elsewhere in the theme or a plugin.

Your script should be wrapped in something that runs it when the page has finished loading, like jQuery(document).ready. Without that, your script will run before the elements it acts upon exist in the DOM. Also note that WordPress jQuery is in noConflict mode, so you should reference the jQuery object via jQuery rather than $:

jQuery(document).ready(function($){
    $('p').each(function() {
        var $this = $(this);
        if($this.html().replace(/\s| /g, '').length == 0)
            $this.remove();
    });
});