0

我正在尝试从外部文件访问 jQuery，但它在我的页面上不起作用。我检查了我的代码并在互联网上搜索但没有发现我的错误......

clearableformfield.jsp

<html>
<head>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="JQuery/jquery.clearable.js"></script>
<link rel="stylesheet" href="JQuery/jquery.clearable.css" type="text/css" />
</head>
<body>
<div id="dom">
<input type="text"  class="foo"></input>
  </div>
<script>
$(document).ready(function() {
    $('.foo').clearable();
});</script>

</body>
</html>

jquery.clearable.js

$(this).css({'border-width': '0px', 'outline': 'none'})
    .wrap('<div id="sq" class="divclearable"></div>')
    .parent()
    .attr('class', $(this).attr('class') + ' divclearable')
    .append('<a class="clearlink" href="javascript:"></a>');

$('.clearlink')
    .attr('title', 'Click to clear this textbox')
    .click(function() {

        $(this).prev().val('').focus();

});

jquery.clearable.css

.divclearable {
    border: 1px solid #888;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;
    padding-right:5px;
    vertical-align:middle;
}

a.clearlink {
    background: url("close-button.png") no-repeat scroll 0 0 transparent;
    background-position: center center;
    cursor: pointer;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;
    height: 12px;
    width: 12px;
    z-index: 2000;
    border: 0px solid;
}

#dom{
    background-color:#b0c4de;}
}

所有这些文件都在 JQuery 文件夹中的 web 内容中

4

2 回答 2

1

您需要在 html 文件的最顶部包含一个 DOCTYPE：

<!DOCTYPE html>

这可能会导致旧版本的 Internet Explorer 出现问题，并且可能会导致您的问题。

如果没有更多信息，很难判断可能是什么问题，您使用的是什么浏览器？控制台（firebug/IE 开发工具/Chrome 开发工具）中抛出了哪些错误，是 404 错误还是其他 JavaScript 错误？

你的目录结构是什么样的？您确定事情在正确的位置并且您没有错误命名吗？我注意到您输入了文件夹名称，JQerey这是故意拼写还是错误？

也可能是文件返回错误的 Mime 类型，尽管我怀疑是这种情况。

于 2013-06-10T08:31:25.487 回答
1

你的文件路径应该是这样的

xxx.html
JQuery [folder]
   |
   |---jquery.clearable.js
   |---jquery.clearable.css
   '---close-button.png

更新

你的 HTML 文件应该是这样的

<HTML>
<HEAD>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="JQuery/jquery.clearable.js"></script>
    <link rel="stylesheet" href="JQuery/jquery.clearable.css" type="text/css" media="screen"/>

    <TITLE>Clearable Textboxes in jQuery</TITLE>

</HEAD>
<BODY>


<input type="text" class="clearable style1" size="30"></input>
&nbsp;
<input type="text" class="clearable style1"></input>

</BODY>
<SCRIPT>
$(document).ready(function(){
$('.clearable').clearable()
});
</SCRIPT>
</HTML>

JQuery/jquery.clearable.js文件应该是这样的

jQuery.fn.clearable = function() {
    
    $(this).css({'border-width': '0px', 'outline': 'none'})
        .wrap('<div id="sq" class="divclearable"></div>')
        .parent()
        .attr('class', $(this).attr('class') + ' divclearable')
        .append('<a class="clearlink" href="javascript:"></a>');

    $('.clearlink')
        .attr('title', 'Click to clear this textbox')
        .click(function() {
            
            $(this).prev().val('').focus();

    });
}

JQuery/jquery.clearable.css文件应该是这样的

.divclearable {
    border: 1px solid #888;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;    
    padding-right:5px;
    vertical-align:middle;
}

a.clearlink {
    background: url("close-button.png") no-repeat scroll 0 0 transparent;
    background-position: center center;
    cursor: pointer;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;    
    height: 12px;
    width: 12px;
    z-index: 2000;
    border: 0px solid;
}

并将此图像添加到 JQuery 文件夹。

于 2013-06-10T07:45:46.203 回答