Question

Why is the call to console.log(this.attr("id")); coming up as undefined?

(function( $ ) {
    $.fn.fs_suggest = function(options) {
        console.log(this.attr("id"));
    };
})( jQuery );

$("#places_search").fs_suggest();

Here is the HTML:

<div class="search_container" id="search">
    <form data-remote="false" method="get" action="/search">
        <input type="text" placeholder="search places" name="query" id="places_search">
        <input type="submit" value="search">
    </form>
</div>

I’m trying to get a reference to the element on which the .fs_suggest() function is called, in this case $(“#places_search”)

Answer 1

I have solved this. The problem was that I didn’t place the call to fs_suggest() in a doc ready block. So the answer is to call it like this.

places.js.coffee:

$ ->    
    $("#places_search").fs_suggest()

and in another file the plugin:

(function( $ ) {
    $.fn.fs_suggest = function(options) {
        console.log(this.attr("id"));
    };
})( jQuery );

now “this” will be seen, and will equate to $(“#places_search”).