How can I bind a mouseover using jQuery after the DOM has loaded?

[omanson]

Note: I am just learning jQuery, so if this can be done more efficiently, please do share.I am coding a follow/unfollow feature. The portion where the user follows another user works (see first snippet below), but now I want to change "Following" to say, "Unfollow" when the user hovers/mouseovers "Following".The code to "Follow" is here (it works):\[code\]$(document).on('click','a.follow-user',function () { event.preventDefault(); var action = $(this).attr("action"); var userid = $(this).attr("userid"); var follower_userid = $(this).attr("follower_userid"); $.ajax({ type: "POST", url: "/follow-user.php", data: "action=" + action + "&userid=" + userid + "&follower_userid=" + follower_userid, success: function(data) { if (data =http://stackoverflow.com/questions/15698846/="FOLLOWED") { $(".follow-user").html("Following"); $(".follow-user").attr({"action" : "0"}); $(".follow-user").removeClass("follow-user").addClass("following-user"); } else { $(".follow-user").removeClass(".follow-user").addClass("icon-warning-sign"); } } });});\[/code\]and the code for when the mouse is over the "Following" text is here (it doesn't work - no errors):\[code\]$(".following-user").on("mouseover", function () { $(this).html("Unfollow") $(this).attr({"action" : "1"}); }).mouseout(function() { $(this).html("Following") $(this).attr({"action" : "0"});});\[/code\]