Develop Reference

$(document).on("click") not working but $('selector').on("click") works why?

I am working with video.js and video.js library is loading via script tag I want to track click function on list item and update player-menu.
$(".vjs-menu-item").on("click" ,function(){ alert('selector');});
but not working this one
$(document).on("click",".vjs-menu-item", function() {alert('document'); });
Hence $(document) method only works on these items which added on same page i.e
<p id="vjs-menu-item"> click me </p>

Here the selector is id but you are referencing to a class
Change to this
$(document).on("click","#vjs-menu-item", function() {alert('documnet'); });
or use class instead of id in html
HTML
<p class="vjs-menu-item">Click me</p>
JS
$(document).on("click",".vjs-menu-item", function() {
alert('document');
});

$(document).ready(function(){
$("#vjs-menu-item").click(function(){
alert('document');
});
});
jsfiddle

How to trigger a anchor tag click event dynamically using javascript?

I'm trying to trigger a already written click event for an anchor tag using JavaScript but it is not working. can any one please help me to do this
I have a anchor tag
<a id="memberid">Data Member</a>
<script>
$("#memberid").click(function() {
changebreadcrumb("Data Management");
});
</script>
i want to trigger above click event on load
i tried
$("#memberid").click();
and
$("#memberid").trigger("click");
but did not work.

Place this at the end of your HTML before the closing body tag
<script>
$(document).ready(function(){
$('#memberid').trigger('click');
});
</script>

DEMO
Use jquery and check whether your dom is ready. It works fine.
See the properties in the fiddle on its left side panel
$("#memberid").click(function() {
alert('clicked');
});
$("#memberid").trigger("click");
EDIT:
FINAL DEMO
If you want to triger click on pageload, use window.onload in javascript or jquery load method as i mentioned.
$(window).load(function()
{
$("#memberid").trigger("click");
});

If your click is not working then in that case....try on() function to trigger event
$(document).ready(function(){
$("#anchor_id").on( "click", function() {
//your work
});
});

Jquery no displaying alert box when a button is clicked

I have a simple script that alerts the user what he or she typed in a search box. Im using Jquery to get the value of the input field when the user clicks the search button. Nothing is appearing though when I click the search button.
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$('#searchButton').click(function() {
alert($('#youtubeSearch').val());
});​
</script>
I just need an alert box to appear with the value, how do I do this?

Wrap your code inside the .ready handler. You cannot manipulate dom elements before it got ready.
Try this,
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$('#searchButton').click(function() {
alert($('#youtubeSearch').val());
});​
});
</script>
DEMO

well.. you need to make sure the element is loaded , before you attach any events to it (click in your case) .. so for that you either have to enclose you code inside document.ready function
<script>
$(function(){
$('#searchButton').click(function() {
alert($('#youtubeSearch').val());
});​
});
</script>
or add your script at the end of your HTML just to make user you DOM is ready..

trouble using this script to make the button close by clicking outside

I'm trying to use the following script to make the button close its menu by clicking outside of it.
$(document).ready( function(){
$('#trigger').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});});
You can see the demo ([Ideal Fiddle])(http://jsfiddle.net/craigmdennis/H2Chj/2/)
But my button ([Problematic Fiddle]) (http://jsfiddle.net/xJ9ug/) isn't working that well. It takes a few clicks to open the menu. Would you please tell me what's wrong with the css or the script? Any help is much appreciated.

Check out this fiddle. All you need is a simple condition check to make this work.
if ($('#dropdown').has(e.target).length === 0)

actually your code is correct .. the reason why it is not working is it have <input type="checkbox" /> inside a span and click event is being added for span. I don't know the exact reason why checkbox is not let the event propogate but removing the checkbox works like a charm..
and yea one more thing you haven't closed first span tag properly.
working demo without checkbox HERE
use addClass() and removeClass() to acheive the effect you demo had.
thanks

Add .dropdown_content li a,its working now..
$(document).ready( function(){
$('.dropdown').click( function(event){
event.stopPropagation();
$('.dropdown_content li a').toggle();
});
});

Button element click event to toggleClass doesn't work

I have a on/off button that is featured here
I have all the elements in place and im expecting the button class .on to initiate when pressed.
Only it wont work no matter what i try.
i added the exact code in jsFiddle, it works there, but not on my page.
jsFiddle
My page
I'm adding the HTML inside jquery:
'<section>'+
'<button id="button" href="#"></button>'+
'<span>'+
'</span>'+
'</section>'+
I'm guessing its a conflict between CSS elements but i cant pinpoint the problem.
Any thoughts?

Try this
<script type="text/javascript">
$(document).ready(function(){
$('#button').on('click', function(){
$(this).toggleClass('on');
});
})
</script>

In jsFiddle you are correctly binding the event within $(document).ready(), while in your own page you are not. So in jsFiddle, the event is correctly bound to the button element only after the DOM is ready, while in your own page the event fails to bind since the element does not exist yet at that stage.

I can see this in your page's HTML:
<script>
$(function(){
$('#player').metroPlayer();
});
</script>
<script type="text/javascript">
$('#button').on('click', function(){
$(this).toggleClass('on');
});
</script>
You need to place your on() function inside the $(function() { ... });

Try this
$(document).ready(function(){
$('#button').click(function(){
$(this).toggleClass('on');
});
});