jQuery:创建自定义事件

时间:2012-09-07 22:30:14

标签: jquery

我应该创建一个在页面加载时触发的自定义事件,它将一个类“green”添加到id为#myElementId的div中。这是我对代码的尝试,但我收到一条错误消息,说我必须添加绿色类。你能告诉我我做错了什么吗?

$(document).ready(function(){

 $('#myElementId').bind('ready', function() {
      $(this).addClass('green');
    });
});

HTML

<body>
<div id="myElementId"></div>

</body>

更新

这是从一个代码学课程中获取的,该课程应该教会我如何创建一个在页面加载上添加类的自定义事件,所以即使有其他更简单的解决方案,我也试图按照课程的意图解决它

这是他们给出的提示

$("#myElementId").on("myCustomEvent", function(event) {
});

2 个答案:

答案 0 :(得分:3)

你可以这样做:

$(document).ready(function() {
    $("#myElementId").addClass('green');
}​);​

另请注意,id中有拼写错误。它是myElementId,而不是myElementID

编辑:要触发事件,请使用.trigger()

$(document).ready(function() {

 // Bind a function to be executed when 'myCustomEvent' is triggered
 $('#myElementId').bind('myCustomEvent', function() {
   $(this).addClass('green');
 });

 // Trigger the event 'myCustomEvent'
 $('#myElementId').trigger("myCustomEvent"); 

});​

此外,从jQuery 1.7开始,您应该使用.on()而不是.bind()

<强> DEMO

答案 1 :(得分:0)

只需在CSS中按名称绿色添加类..这应该可以为您完成工作..

.green
{
    font-weight: bold;
    background-color: green;
}

选中此FIDDLE

此外,您不需要此行

$('#myElementID').bind('ready', function() {