Develop Reference

add simple onclick js to rails

I have a simple div in one of my views that I want to click to hide another element on the page. I put this in my application.js But it doesn't do anything. Did I put it in the wrong place?
function toggleNewPostForm {
$('.new-post-btn').hide();
}

Use document ready to make sure document is loaded before selecting an element from HTML and call your function inside
function toggleNewPostForm(){
$('.new-post-btn').hide();
};
$( document ).ready(function() {
toggleNewPostForm();
});

Try something like this
<div class="xyz">Click here!</div>
in javascript
$(".xyz").click(function(){
$('.new-post-btn').hide();
});
Also check if event listener is added after document ready method? i.e
$(function(){
$(".xyz").click(function(){
$('.new-post-btn').hide();
});
});

If this is the only js you have, there will be no click-behaviour. You have to tell the element, that is has to react to a click-event.
Try this in your application.js-file:
function toggleNewPostForm() {
$('.new-post-btn').hide();
}
$(document).on('ready page:load', function(){
$('.new-post-btn').on('click', function(){
toggleNewPostForm();
});
});
P.S.: As RGraham points out, you have to write the parameter-paranthesis if you define a function.
P.P.S.: In ruby on rails, you should check against 'ready' and 'page:load' as document-ready-handlers, because Ruby on Rails uses the "Turbolinks"-library by default.

Added Div not working click function

In my scenario , i have to use class to add div , this may easily solve with onClick function, but i require this to complete my task,
.click(function() is not working on new element , javascript /jquery may store element onload or what???
FIDDLE
<div class="add">
<div class="anyRow">Hello<hr/></div>
</div>
$('.anyRow').click(function(){
$('.add').append('<div class="anyRow">Hello</hr></div>')
});

You have to use on() method as the deprecated live() one, to delegate click for future new elements.
$(document).on("click", ".anyRow", function() {
$('.add').append('<div class="anyRow">Hello</hr></div>');
});

If you are using in real case (as in posted jsFiddle) jQuery v1.6.4, you should use .delegate() method:
$('.add').delegate('.anyRow', 'click', function () {
$('.add').append('<div class="anyRow">Hello</hr></div>')
});
-DEMO-
http://learn.jquery.com/events/event-delegation/

For older jquery versions you can use live function if html is changed dynamically (I saw you using an older jquery version in the fiddle)
$('.add').live( 'click', function () {
$('.add').append('<div class="anyRow">Hello</hr></div>')
});

The method bellow applies event handlers to elements even before they exist
$("#parent-element").on("click", "#new-element", function() {
// your code
});

jQuery toggle() function not working

This question may be asked before. But I cant find the error. Here this is from the video tutorial of new boston.
$(document).ready(function(){
$('#btn').toggle(function(){
$('#msg').html('yes');
},function(){
$('#msg').html('No');
});
});
The video showing that when click first the div text is yes and next time it show no
But when I try, when the page loads, the button fadeout and div show no. Why? There may be other methods to achieve this functionality. But why this dont work. He showing the syntax of toggle as
$('#btn').toggle(function(){code},function{code});

http://api.jquery.com/category/deprecated/
Note: This method signature was deprecated in jQuery 1.8 and removed
in jQuery 1.9. jQuery also provides an animation method named
.toggle() that toggles the visibility of elements. Whether the
animation or the event method is fired depends on the set of arguments
passed.
http://api.jquery.com/toggle-event/
Updated after OP's comment
DEMO
if you want to make this code work in any version of jQuery
$(document).ready(function () {
var arr = ['yes', 'no'],
i = 0;
$('#btn').click(function () {
$('#msg').html(arr[i++ % 2]);
});
});
DEMO
if you want to make use of toggle-event like functionality in future
use .one()
$(document).ready(function () {
function handle1() {
$('#msg').html('yes');
$('#btn').one('click', handle2);
}
function handle2() {
$('#msg').html('no');
$('#btn').one('click', handle1);
}
$('#btn').one('click', handle1);
});
or
Toggle was removed in version 1.9, so you cannot use it - if you want this logic can be manually implemented or you can make use of the migration plugin
to include the migration plugin, after the inclusion of jQuery library add
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

applying script to elements inserted via jquery .html()

i'm kinda new to scripting so this might be a bit basic, but i couldn't find an answer anywhere.
To improve my webpage loading time I made some HTML element load (via AJAX) and inserted only when a certain button is clicked, using the jquery .html() function.
That worked, but now all the jquery commands which referred to that element don't seem to apply. I'm guessing it's because the original commands were loaded before the new HTML?
For example, code like this:
$(document).ready(function(){
$('#myButton').click(function(){
$('#placeHolder').html('<div id="touchMe">click me</div>');
});
$('#touchMe').click(function(){
alert ("WORKED");
});
}
How do I make the #touchMe.click command apply to the new incoming HTML?
thanks a lot

Take a look at live()
$('#touchMe').live('click', function() {

Try -
$('#touchMe').live('click',function(){
alert ("WORKED");
});

Instead of
$('#touchMe').click(function(){
alert ("WORKED");
});
use
$('#touchMe').live('click', function(){
alert ("WORKED");
});

you use .live() or .delegate() function instead of click.
$(document).ready(function(){
$('#myButton').live('click', function(){
$('#placeHolder').html('<div id="touchMe">click me</div>');
});
$('#touchMe').live('click', function(){
alert ("WORKED");
});
}
note: the live on "mybutton" is not necessary in this example.

How can I call a Jquery method on DOM elements that don't exist yet?

I'd like to use this lightbox plugin for some autocomplete links, that don't yet exist on my page.
You normally activate it using:
$(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
Since the a links aren't all on the page upon page load, I would normally look to the .live or .delegate methods to bind to an event, but in this case, what 'event' would I bind to to say "once this element is on the page, then call this method on it".
Or am I going about this totally the wrong way?

There is no such event.
You need to invoke the plugin when you add the elements to the page.
// create a new <a>, append it, and call the plugin against it.
$('<a>',{rel:"facebox"}).appendTo('body').facebox();
This example creates a new <a> element. If you're getting some elements from an AJAX response, call it against those:
var elems = $( response );
elems.filter( 'a[rel="facebox"]' ).facebox(); // if the <a> is at the top level
elems.find( 'a[rel="facebox"]' ).facebox(); // if the <a> is nested
elems.appendTo('body');

Not yet tested :
$(document).ready(function($) {
$(document).bind('change', docChanged) ;
})
function docChanged()
{
if ($('a[rel*=facebox][class!="faceboxed"]').length > 0)
{
$('a[rel*=facebox][class!="faceboxed"]').addClass("faceboxed").facebox();
}
}

This is entirely possible using the .live function. You just need to use the DOMNodeInserted event.
$(document).ready(function() {
$("a[rel*=facebox]").live("DOMNodeInserted", function() {
$(this).facebox();
});
});

You'll need to just add this call to the ajax that loads in the links.