jQuery Plugin this.attr( "id" ) undefined

Question

为什么对console.log(this.attr("id"));的调用是未定义的？

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

这是 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>

我正在尝试获取对调用 .fs_suggest（） 函数的元素的引用，在本例中为 $（"#places_search"）

Answer 1

我想你想要这个：

console.log($(this).attr("id"));

除非我弄错了，否则this引用一个 DOM 元素（它没有attr函数），而$(this)获取实际的 jQuery 对象（它有）。

---

如果这（或者我的意思是this？嘿嘿......）不起作用，那么你只是在错误的选择器上调用函数。

---

在进一步阅读jQuery文档后，您的问题似乎在您提供给我们的上下文之外的其他地方。您是否在 DOM 正确加载之前调用您的插件？（例如$(document).ready()之外）

Answer 2

我不是 100% 这个符号产生的东西：

$.fn.fs_suggest = function(options) {
...

但是，如果$.fn解析为对象并且fs_suggest是该对象的属性，则函数内部的this将引用该对象，而不是DOM元素或jQuery包装元素。

Answer 3

我已经解决了这个问题。问题是我没有在文档就绪块中调用 fs_suggest（）。所以答案是这样称呼它。

地点.js.咖啡：

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

在另一个文件中，插件：

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

现在将看到"this"，并等于 $（"#places_search"）。