I'm trying to add a function to a button but the function is called when the page is loaded when the button is clicked, getMemberByName is on another js file and works correctly
<input type="button" value="miembro" id="boton2" />
<script>
$("#boton2").click(getMemberByName('nombre1','apellido1'));
</script>
here is the proper way to bind such event with jQuery:
<script>
$(function(){
$('#boton2').click(function(){
getMEmberByName('nombre1', 'apellido1');
});
});
</script>
hope that helps.
You need to wrap them in functions:
<script>
$(document).ready(function(){
$("#boton2").click(function(){
getMemberByName('nombre1','apellido1');
});
});
</script>
Docs: http://api.jquery.com/click/
Try this instead:
$("#boton2").click(function() {
getMemberByName('nombre1','apellido1');
});
If this can help someone, as #Moosman says, you need to wrap what you want to do in a function and you must not call. Example:
<script>
$("#boton2").on("click", function(){getMemberByName('nombre1','apellido1')});
</script>
OR:
<script>
$("#boton2").on("click", myfunction);
function myfunction() {
getMemberByName('nombre1','apellido1')
}
</script>
Watch out to not call the function $("#boton2").on("click", myfunction()); because this will call the function just when you load the page and not after, for my experience.
Related
For some reason the method display is being processed before location.reload(). Here is my syntax:
$(document).ready(function() {
$("#refresh").click(function() {
alert("before refresh")
location.reload();
display()
})
})
function display() {
alert("hello world")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="refresh">
refersh and continue
</button>
My goal here is to refresh the page when the button is clicked then call display method.
The problem is that display method is being called before the page is refreshed.
First of all, is what I am trying to achieve achievable. If not, what other ways can go take in order to solve the problem?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
display();
$("#refresh").click(function(){
alert("before refresh")
//location.reload();
display();
});
})
function display(){
alert("hello world")
}
</script>
<button id="refresh">
refersh and continue
</button>
</body>
</html>
Try this, call the display method on loading the document and remove the reload(), if needed add display() in refresh.
You could try assigning your display method to the document.onload event. Try changing your click handler to:
alert('before refresh');
$(document).on('load', display);
location.reload;
I have below function in JS file name as hello.js inside js folder.
JS
function hello(){
alert('hello world !);
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/hello.js"></script>
<script>
$(function() {
$("#hello").hello();
});
</script>
</head>
<body>
<button type="button" id="hello">Click Me!</button>
</body>
</html>
How do I attach the hello() function to the button with the id="hello"? I'm doing something wrong but I can't find what.
Edit : I recommend reading all answers for completeness.
Edit2: The purpose of this question was to clarify the general method of attaching functions to specific elements on html. The button and the click interaction was an example.
You are probably looking to bind click event on button with id hello using hello as handler
$("#hello").click(hello);
There are many ways to handle events with HTML or DOM.
Defining it in HTML
<button type="button" id="hello" onclick="hello();">Click Me!</button>
Using JQuery
$("#hello").click(hello);
Attaching a function to the event handler using Javascript:
var el = document.getElementById("hello");
if (el.addEventListener)
el.addEventListener("click", hello, false);
else if (el.attachEvent)
el.attachEvent('onclick', hello);
function hello(){
alert("inside hello function");
}
Useful links
MDN - onclick event
SO - Ans 1
SO - Ans 2
Use .on() to bind event handler.
$("#hello").on('click', hello);
Pure javascript:
var elm=document.getElementById("hello");
elm.onclick= function{ hello();};
Jquery:
$("#hello").click(hello() );
Have an anchor tag, trying to click it from the javascript but not responding, while loading the page it should go to next.php without click anchor tag manually.how can I archive this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-2.0.3.js"></script>
<script type="text/javascript">
alert("hai");
$(document).ready(function() { $('#about').click(); });
</script>
</head>
<body>
<div>
click here
</div>
</body>
</html>
Use $('selector')[0], as $('selector') returns a jQuery object, so $('selector').click() will fire the click handler, while $('selector')[0].click() would fire the actual click.
$(document).ready(function () {
$('#about')[0].click(); //$('#about').get(0).click();
});
Demo
You can not use javascript to fire click event
It should use
<script type="text/javascript">
$(document).ready(function() {
document.location.href='/next.php'
});
</script>
Here is the code that can help you
$(document).ready(function() {
$(document).ready(function() {
$('a').trigger('click');
});
})
function abc() {
alert("");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me not
If you want the recommended way then use this inside $(document).ready
window.location="where ever you want to go";
If you want the page to go to next.php without clicking then place the window.location directly into $(document).ready(function() { });
Click() function is used when you want to trigger click event. ie. when you want to trigger some action when anchor tag is clicked.
<script>
alert("hai");
$(document).ready(function() {
window.location = 'next.php'; //If you wish the page to automatically go to next page on page load.
$('#about').click( // If you wish to do something clicking anchor
function(){
alert("Hello");
});
});
</script>
$(document).ready(function() { $('#about').trigger('click'); });
Updated:
$(document).ready(function() { $('#about')[0].click(); });
Hey guys am new to javascript web development.I have been through preventDefault() through my code.But when i used it it returns the error ..My code
<html>
<body>
function preventDef(event) {
event.preventDefault();
}
document.querySelector('a').addEventListener("click",
preventDef(event),false);
</script>
click here
</body>
</html>
When i use this code and clicked on the link it redirects me to google.com ..what i need is the event must be blocked my preventDefault() function..
Hope you guys can help me out ..Thanks
You are calling the preventDef function instead of passing it by reference.
document.querySelector('a').addEventListener("click", preventDef, false);
// ^^^ don't call the function
EDIT: Another issue is that you are running this before the DOM is ready. You need to move the <script> tag down to be after the <a>.
<html>
<body>
click here
<script>
// ^^ did you miss an opening script?
function preventDef(event) {
event.preventDefault();
}
document.querySelector('a').addEventListener("click", preventDef, false);
// ^^^ don't call the function
</script>
</body>
</html>
<div id ="instant-view">
<textarea id="upload-data-text" placeholder="Copy & paste your data here"></textarea>
</div>
<script>
$("#instant-view").hide();
</script>
here the the id "#instant-view" not hiding, i am not getting whats going wrong.
i am using jquery though
Wrap your code inside document's ready event like,
$(document).ready(function(){
$("#instant-view").hide();
})
Working Fiddle
Add $(function () {});
<script>
$(function () {
$("#instant-view").hide();
});
</script>
You are missing $(document).ready(function(){});
Use,
$(document).ready(function(){
$("#instant-view").hide();
});
use the code inside document ready
$(document).ready(function(){
$("#instant-view").hide();
});
Try this
$(window).load(function() {
$("#instant-view").hide();
});
Firstly, make sure you've included jQuery or reference it properly, normally I'd use Google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Secondly, if you put your code at the end of your page then it's fine, but if you place your jQuery code in the <head> section then you need to wrap it inside DOM ready handler $(function() {...}); to make sure all DOM elements have been loaded properly.
$(function() {
$("#instant-view").hide();
});
Your final code should look something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$("#instant-view").hide();
});
</script>