Coffeescript .bind seems to be wrapped inside a fu

Question

I am trying to use a flot in a coffeescript .The returned javascript wraps all the methods in a function call and because of that I am not able to use the .bind event. $(this).bind 'plothover', (event, pos, item) -> is not getting called when my mouse moves

$ ->
  $("#flot-placeholder1").text("Amit")
  plot = $.plot($("#flot-placeholder1"), dataset, options)
  $("#flot-placeholder1").UseTooltip()

$.fn.UseTooltip = ->
  alert "UseTooltip"
  **$(this).bind 'plothover', (event, pos, item) ->**
    alert "UseTooltip"
    if item
      if (previousLabel isnt item.series.label) or (previousPoint isnt item.dataIndex)
        previousPoint = item.dataIndex
        previousLabel = item.series.label
        $("#tooltip").remove()
        x = item.datapoint[0]
        y = item.datapoint[1]
        color = item.series.color
        month = new Date(x).getMonth()
        if item.seriesIndex is 0 or item.seriesIndex is 2
          showTooltip item.pageX, item.pageY, color, "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(USD)"
        else
          showTooltip item.pageX, item.pageY, color, "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(%)"
    else
      $("#tooltip").remove()
      previousPoint = null

Answer 1

In the flot/examples/interacting/index.html I replaced the script with

<script language="javascript" type="text/javascript" src="interact.js"></script>

where interact.js is the compiled version of this coffeescript file:

plot = null # make global for use by UseTooltip
$ ->
  sin = ([i, Math.sin(i)] for i in [0...14] by 0.5)
  cos = ([i, Math.cos(i)] for i in [0...14] by 0.5)
  plot = $.plot "#placeholder",
    [{ data: sin, label: "sin(x)"},
     { data: cos, label: "cos(x)"}
    ],
    series:
      lines:
        show: true
      points:
        show: true
    grid:
      hoverable: true,
      clickable: true
    yaxis:
      min: -1.2,
      max: 1.2

  $("#placeholder").UseTooltip()
  $("#placeholder").UseClick()

  ### Add the Flot version string to the footer ###
  $("#footer").prepend("Flot #{$.plot.version} – ")

$.fn.UseTooltip = ->
  previousPoint = null
  @bind "plothover", (event, pos, item) ->
    if $("#enablePosition:checked").length
      str = "(#{pos.x.toFixed(2)}, #{pos.y.toFixed(2)})"
      $("#hoverdata").text(str)

    if $("#enableTooltip:checked").length
      if item
        if previousPoint isnt item.dataIndex
          previousPoint = item.dataIndex
          $("#tooltip").remove()
          [x, y] = (d.toFixed(2) for d in item.datapoint)
          showTooltip item.pageX, item.pageY,
            item.series.label + " of #{x} = #{y}"
      else
        $("#tooltip").remove()
        previousPoint = null

$.fn.UseClick = ->
  # @ is already a jQuery obj, don't need $(this)
  @bind "plotclick", (event, pos, item) ->
    if item
      $("#clickdata").text(" - click point #{item.dataIndex} in #{item.series.label}")
      plot.highlight(item.series, item.datapoint)

showTooltip = (x, y, contents) ->
  $("<div id='tooltip'>#{contents}</div>").css({
          position: "absolute",
          display: "none",
          top: y + 5,
          left: x + 5,
          border: "1px solid #fdd",
          padding: "2px",
          "background-color": "#fee",
          opacity: 0.80
      }).appendTo("body").fadeIn(200)

It functions just like the original. With the grid set to hoverable, $(this).bind "plothover", (event, pos, item) -> works just fine.