Question

使用jQuery的插件架构，我在我的js文件中有一行代码，它将一个简单的“div”元素附加到文本框中。任务看起来很简单，但我无法弄清楚我哪里出错了。

来自我的html文件的片段

<div style="margin-top:50px">
    Search: <input id="searchbox" type="text" /><br />
</div>
...
<script type="text/javascript">
$(document).ready(function() {
    $('#searchbox').testplugin();
})
</script>

这是来自testplugin.js文件

init : function(options)
{
    // some initialization

    // iterate through all the jquery objects
    return this.each(function() {
        $(this).append('<div>Sample Text</div>');
    });
}

此时，我确信$（this）引用了正确的对象（我已尝试提醒id）。此外，当我尝试在Firefox中执行“查看源代码”时，我也会看到新添加的div（但不会在实际的GUI中）。但是，在Internet Explorer中，我收到“意外调用方法或属性访问”错误。

我在这里做错了什么？或者我应该怎么做才能使这项工作？

谢谢！欧文

Answer 1

Erwin，我相当确定每个规范 - 你不能在输入元素中放入div元素。这可能是您的IE错误的来源＆amp;加载时浏览器中没有显示任何内容的原因。

尝试做.val（'test'）;而不是append（）＆amp;你可能会遇到工作代码，同样适用于.addClass（'yourcssclass'）;或任何其他“合法”的DOM操作。

Answer 2

init : function(options)
{
// some initialization

// iterate through all the jquery objects
return this.each(function() {
    $(this).val('Sample Text');
});
}

如果您尝试在文本框“示例文本”中创建文本，此代码将有所帮助您的插件仍可用于div，a等元素......

Answer 3

修改我的代码以使用after（）而不是append（）

init : function(options)
{
    // some initialization

    // iterate through all the jquery objects
    return this.each(function() {
        $(this).after('<div>Sample Text</div>');
    });
}

jquery：在文档加载时附加到文本框

3 个答案: