从Rails视图调用JS函数

Question

Here is my view:

<a href="#" onclick="delete_quote(this);" class="quote-delete">
  <i class="fi-x small-1"></i>      
</a>

Here is my coffee script file:

$(document).ready -> 
    $('a.quote-delete').hide()

    $('div.quote').mouseenter ->
        $(this).children('a.quote-delete').show()

    $('div.quote').mouseleave ->
        $(this).children('a.quote-delete').hide()

delete_quote = (element) ->
    alert 'hi'

The $(document).ready part works fine, but when i press the link I don't get the 'two' message and I have the error in browser console:

Uncaught ReferenceError: delete_quote is not defined 

Here is compiled JS file:

(function() {
  var delete_quote;

  $(document).ready(function() {
    $('a.quote-delete').hide();
    $('div.quote').mouseenter(function() {
      return $(this).children('a.quote-delete').show();
    });
    return $('div.quote').mouseleave(function() {
      return $(this).children('a.quote-delete').hide();
    });
  });

  delete_quote = function(element) {
    return alert('hi');
  };

}).call(this);

Answer 1

CoffeeScript is putting the delete_quote function inside a function closure, and is therefore not part of the global context on the page. The function in the onclick handler is being invoked in the global context.

In this regard, CoffeeScript needs a little extra help. I'm very familiar with JavaScript, a beginner at CoffeeScript, so the following code might not work but should give you the basic idea. You'll have to define the function as part of the window object:

window.delete_quote = (element) ->
    alert 'Hi'

Edit: You might also try:

this.delete_quote = (element) ->
    alert 'Hi'

This other StackOverflow question might be helpful as well: CoffeeScript: coffee -w name-of-file.coffee complains: “window is not defined” -- though the question has more to do with running CoffeeScript compiled JavaScript in Node and the browser, but it touches on how to define "global" variables and functions.