Question

I have this link:

<%= link_to_function "remove", "remove_fields(this)"%>

which outputs this html:

<a href="#" onclick="remove_fields(this); return false;">remove</a>

and I have this JQuery function:

    function remove_fields(link){
      $(link).prev("input[type=hidden]").val("1");
      $(link).closest(".fields").hide();
    }

but when I click on the link, I get this error:

Uncaught ReferenceError: remove_fields is not defined

Why is this and how do I fix it?

Answer 1

You should not use the onclick attribute, it’s a bad practice and something that belongs back in the 90s. Instead you should add a class for your anchors and bind a handler to the click event with jQuery.

HTML

<a class="remove-fields" href="#">remove</a>

JavaScript

// This is a shorthand for document.ready
$(function(){
    // Bind handler to click event
    $("a.remove-fields").click(function(e){
        var $this = $(this);
        $this.prev("input[type=hidden]").val("1");
        $this.closest(".fields").hide();
        // Prevent default behavior
        e.preventDefault();
    });
});