Question

我的网站<head>部分有以下脚本：

<script src="scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
$('#submit').click(function() {
$('#submit').css('background-image', 'url("/static/ui/msback.png")');
});
</script>

以及id submit的提交按钮。但是，单击提交按钮不会更改背景图像。这里有什么错误？

Answer 1

您需要使用.ready()包装函数，以便jQuery在元素加载后将Function分配给按钮。否则jQuery无法将该函数分配给任何按钮，因为该按钮尚不存在。

试试这样：

$(document).ready(function () {
    $('#submit').click(function() {
        $(this).css('background-image', 'url("/static/ui/msback.png")');
    });
});

JS FIDDLE ：http://jsfiddle.net/pQgAj/1/

有关详细信息，另请参阅http://api.jquery.com/ready/。

：您可以在$(this)函数中使用.click()，节省时间，因为jQuery不必再次评估$('#submit')。

// 替代：将您的函数包装到.ready()的替代方法是将您的javascript代码放在网站的末尾。但我不推荐这个。

Answer 2

尝试将其包装在document.ready中：

<script src="scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
   $(document).ready(function(){
        $('#submit').click(function() {
          $('#submit').css('background-image', 'url("/static/ui/msback.png")');
        });
  });
</script>

JQuery Click事件无法正常工作

2 个答案: