Develop Reference

jQuery bind event on element fails

We are using jQuery 2.1.4 and have written out own JavaScript class that should take care of the event. It is a very simple "application". All it does is taking care of submitting a form. Before that, it processes the data.
Our initial method that we call on rendering the page:
OWebForm.prototype.init = function(){
console.log("init Method called");
...
$("#submit_message").on("click", this._submit);
console.log($("#submit_message"));
...
}
OWebForm.prototype._submit = function(e){
e.preventDefault();
console.log("_submit Method called");
...
}
Once the button "#submit_message" is clicked, it is supposed to call the _submit method of the OWebForm class. When looking at the element within the console I can see that it is not bound to anything, when the page is loaded. Hence the code is not executed once the button is clicked.
In the HTML I have the following code:
<script type="text/Javascript">
var _oWebForm = new OWebForm("0bcfwqx23xv02dfaqfujdqyafziic4b07uxkkg1y6lkof7x0px0vjm2tpaik2l2rmlrhnjya0bvctnpq26dqcom1ij5zpibodke3rs1z4f2syllthtj0kpl3p4vrw0vw");
_oWebForm.init();
</script>
From the documentation I understood, that the function has to exist before it is bound to an element event. Is this not the case when working with objects? How would I fix this?

Your script is executed before the DOM is loaded so the element doesn't exist yet, and the jQuery selector doesn't match anything, so no elements get a click handler bound to them. You need to call the init() method with in $(document).ready().
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
$(document).ready(function() {
var _oWebForm = new OWebForm("0bcfwqx23xv02dfaqfujdqyafziic4b07uxkkg1y6lkof7x0px0vjm2tpaik2l2rmlrhnjya0bvctnpq26dqcom1ij5zpibodke3rs1z4f2syllthtj0kpl3p4vrw0vw");
_oWebForm.init();
});

This works for me:
var OWebForm = function(a){
};
OWebForm.prototype.init = function() {
alert("init Method called");
$("#submit_message").on("click", this._submit);
}
OWebForm.prototype._submit = function(e){
e.preventDefault();
alert("_submit Method called");
}
$(function() {
var _oWebForm = new OWebForm("0bcfwqx23xv02dfaqfujdqyafziic4b07uxkkg1y6lkof7x0px0vjm2tpaik2l2rmlrhnjya0bvctnpq26dqcom1ij5zpibodke3rs1z4f2syllthtj0kpl3p4vrw0vw");
_oWebForm.init();
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<form id="myFrm">
<input type="text">
<input id="submit_message" type="submit" value="Click me To test">
</form>
You need to substitute:
$("#submit_message").on("click", this._submit);
with:
$(document).on("click", "#submit_message", this._submit);
If the submit_message is not already loaded!

How do I call my jQuery function so that it will run in my document.ready function?

In my application I have a script:
<script type="text/javascript">
function pageLoad(sender, args){
$('#nursing').click(function () {
document.getElementById("ddlPositionType").selectedIndex = 1;
$("#btnSearch").click();
a.href = "#";
return false;
});
}
</script>
Then below it I am attempting to call it when the page is loaded like this:
<script type="text/javascript">
$(document).ready(function () {
$('#nursing').click();
});
</script>
This does not fire when the page load as it should and it causes no errors in my console. What is most confusing is that if I took from document to return false from the first code block and placed it where I am trying to call the $('nursing').click(); the code will run like it is supposed to.
As reference #nursing is simply a link used on my slider to control content.
<a id="nursing" class="oslide">Nursing Positions</a>

The code you've written in pageLoad is an instruction to set up a click handler. That setup will not be executed unless the pageLoad function is called prior to your call to click the button in document.ready. The easy fix may be to simply modify your code so that it calls pageLoad, and then clicks the anchor.
<script type="text/javascript">
$(document).ready(function () {
pageLoad();
$('#nursing').click();
});
</script>
But this seems a lot of overkill to call a function by performing a click. Why not just make a function out of the click handler and call that code in document.ready instead? If you still need the click handler, call the function in the click handler.
function onNursingClick() {
document.getElementById("ddlPositionType").selectedIndex = 1;
//... and so on....
}
function pageLoad() {
$("#nursing").click(onNursingClick);
}
$(function() { //shorthand for $(document).ready(...);
onNursingClick();
pageLoad();
})

It's not working because in your document.ready script you're not calling the function pageLoad() that you created earlier. You are firing a click event. So try this:
<script type="text/javascript">
$(function(){ //Jquery shorthand for document.ready
pageLoad(sender, args); //pass in what you need
});
</script>

Window.onload and ordering

In the code below, I can't seem to understand the ordering of events. When I load this in the browser, I get the alert before the first div renders and the .onclick event listener cannot find the translate_button element to attach to. I thought because of the use of window.onload, my script would execute after the above html loaded. Does this have to do with the inline javascript within the html?
<div id='MicrosoftTranslatorWidget' class='Dark' id='translate_button'></div><script type='text/javascript'>setTimeout(function(){{var s=document.createElement('script');s.type='text/javascript';s.charset='UTF-8';s.src=((location && location.href && location.href.indexOf('https') == 0)?'https://ssl.microsofttranslator.com':'http://www.microsofttranslator.com')+'/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=True&ui=true&settings=Manual&languages=es,pt,fr,it,tr,zh-CHS,zh-CHT,ru,de,en';var p=document.getElementsByTagName('head')[0]||document.documentElement;p.insertBefore(s,p.firstChild); }},0);</script>
<div class='disclaimer-link' id='disclaimer-link' style='display:none'>Disclaimer</div>
<script type="text/javascript">
window.onload = function () {
var button = document.getElementById("translate_button");
button.onclick = alert("lol");
};
</script>

You're assigning function execution. If you want to assign actual function you need something like
button.onclick = function() { alert("lol"); }
Another thing - you have ID defined twice for the DIV. Remove one and use the one that remains.

Dynamic button click doesn't work in Jquery

I want to develop dynamic presentation content in HTML5 presentation from
http://www.script-tutorials.com/creating-an-attractive-presentation-with-html5/
This tutorial is ok for static content . But I want to write dynamic content with jquery as the following:
$(document).ready(function(){
$.getJSON(url, function (data) {
for(var i in data)
{
output=" <button title='Next' id='nav-next' class='nav-next'>Click</button>";
}
$("#placeholder").append(output);
});
});
When click on button , I want to go next slide. But this event does not work. I want to call next function on javascript file. Please help.

You said "When click on button" and that is the answer use jQuery.on() method.
$('#nav-next').on('click',(function () {
// click code.
});
and then when you created DOM with id defined in .on will have click event dynamically attached.

You're not attaching an event to the new button, this can be done using the jQuery click method.
Also some other problems:
the loop seems to be redundant, you're not actually using anything in data.
output is being defined as a global variable in your example, use var to keep it in function scope.
Code:
$(document).ready(function() {
$.getJSON(url, function (data) {
// use var, your output was a global variable
var output = " <button title='Next' id='nav-next' class='nav-next'>Click</button>";
$("#placeholder").append(output);
// attach the click event to the new button
$('#nav-next').click(function () {
// TODO: Implement click method
});
});
});
Since you're not using data you can remove the call to getJSON safely currently. I assume you put it in for some reason though.

jQuery ajax works once, but each time thereafter loads the href through browser

I have a click handler that reads the href attribute of an a tag and loads the new content via ajax. The function returns false so it doesn't follow the href url. This works once, but each time thereafter, the function does not appear to get called and the content is not loaded asynchronously, but instead follows the link in the browser.
$ ("document").ready( function () {
$(".post_update").click( function () {
$("#dashboard_content").html(ajax_load).load($(this).attr('href'));
return false;
});
});
Edit

you should not use document as a string its an object itself try the belwo code.
Since the link is inside dashboard container you should use live in this case.
$(document).ready( function () {
$("a.post_update").live('click', function () {
$("#dashboard_content").html(ajax_load).load($(this).attr('href'));
return false;
});
});

If .post_update is inside #dashboard_content, the problem is that the element to which the event handler was bound, is now gone. The simplest solution, is to use the jQuery.live method. So your code would look like:
$(document).ready(function () {
$(".post_update").live("click", function (e) {
$("#dashboard_content").html(ajax_load).load($(this).attr('href'));
return false;
});
});