I am new to web development and I am learning JQuery now. I have a doubt here. This is the code from W3Schools.com. I would like to know if I add one more button here, how can I run this JavaScript for the click event of the FIRST button only.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
<br />
<button>Second Button</button>
</body>
</html>
You can add an ID to the button and put a click event on that id by selecting like this (if button id is 'submitForm') $("#submitForm")
In fact, there are many ways you can select elements with jquery, check this out: http://api.jquery.com/category/selectors/
In your specific example, if you don't want to put ID's on buttons, you could use :first to only access the first one, like this $("button:first")
Change
$("button").click(function(){
$("p").hide();
});
to
$("button").eq(0).click(function(){
$("p").hide();
});
This will only bind to the click event of the first button. See http://api.jquery.com/eq/.
jsFiddle example
Related
This question already has answers here:
Using HTML script tags to code while they have a source
(2 answers)
Html script tag - can script be added when src is used [duplicate]
(4 answers)
Closed 11 months ago.
Trying to currently write a function that hides an HTML table element whenever an option is chosen on a dropdown menu. However, trying to test this doesn't seem to yield results.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
$(function () {
$(".testClass").hide();
});
</script>
And the HTML:
<div class="testClass">Test</div>
Close original the script tag used for using src, and open another one for the inline script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(function () {
$(".testClass").hide();
});
</script>
</head>
<body>
<h2>Some heading</h2>
<div class="testClass">Test</div>
</body>
You are not supposed to put anything between the jquery tags.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
Then create another script inside the body of your application. Here is an example from w3schools:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
The example above shows how to hide an element using jQuery with a click of a button.
However, I am not sure it is the best way to hide an element in Angular. You can do it with an example from here:
Angular 2 Show and Hide an element
Please look at gentiane answer.
I have a main page that I have loaded another page on it via ajax when document is ready ,also I have a button that when I click It I shows an alert and, I have that button in the second page too. but when i click on it in that page that code does not work ?
how can i solve this problem ?
because I do not want to repeat js codes on the second page ?
here is my first page code :
first page code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="captcha" style="border:1px solid red;">
</div>
<div class="details1">cccc</div>
<script>
$(document).ready(function(e) {
$(".captcha").load("/secondpage.htm");
$(".details1").click( function()
{
alert('button clicked');
}
);
});
</script>
</body>
</html>
and this is my second page that I have loaded into div with classname captcha:
second page code:
<html>
<head>
</head>
<body>
<section class="details1"> Details </section>
</body>
</html>
When you need to create new elements on-the-fly, you can not use standard click etc. events. Dynamically created elements are not born with the same event handlers as the existing elements. You have to dynamically attach event handlers to newly created elements.
Replace 'click' with 'on'.
$("body").on("click", ".details1", function(){
alert('button clicked');
});
Trying to work out if it's possible to have multiple toggle buttons on my page while not having to repeat jQuery .toggleClass code for each button (with different id's)? Maybe use 'this' or some other method?
$(document).ready(function(){
$("button").click(function(){
$("p").toggle('fast');
});
});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
Thanks in advance!
You can use event delegation.
For example, if you bind click event to buttons. I think you can use id or data attribute to differentiate which button is triggered. Then you can move forward.
to toggle the next p you need to use .next()
$(document).ready(function(){
$("button").click(function(){
$(this).next('p').fadeToggle('fast');
});
});
to toggle the next p and next next p you need to use .next()
$(document).ready(function(){
$("button").click(function(){
$(this).next('p').fadeToggle('fast');
$(this).next().next().fadeToggle('fast');
});
});
you can select your button ids like
$("#button1, #button2").click();
I don't prefer your html structure .. if you can put each button and its P in one div it will be better to handle
$(function() {
$('#toggle-event1,#toggle-event2,#toggle-event3,#toggle-event4,#toggle-event5').change(function() {
let state1 = $(this).prop('checked');
//alert( "First handler for .toggle() called." );
alert(this.id);})
I am using jQuery and Ajax.
HOME.html
<html>
<head>
<script src="jquery.js"></script>
<script src="javascript.js"></script>
</head>
<body>
<div id="div1"></div>
<button>click</button>
</body>
</html>
javascript.js
$(document).ready(function(){
$('button').click(function(){
alert('Button is clicked');
$("#div1").load("test2.html");
});
$("#b2").click(function(){
$("#div2").hide();
});
});
TEST2.html
<body>
<div id="div2">
some content
<input type="button" id="b2" value="hide" />
</div>
</body>
<head><script src="javascript.js"></script></head>
When I click on button, Ajax loads the content in div. But when I again click on button then it is clicked twice. I know why this click twice happens, because I again load the javascript.js file.
If I can't do that then the hide button is not working because the JavaScript loads before the div2, that's why hide button is not working.
SOLUTION:
There is one solution is that I use the hide button code in test2.html instead of in javascript.js But I don't want to do that.
Beacuse this is a demo in my original code this is very difficult to do that.
Is there another solution to this?
Repeatedly re-loading the JavaScript is a bad idea.
If you just want to handle clicks on buttons that are dynamically added, you can do that using event delegation. Remove javascript.js from test2.html entirely, and hook up your handlers like this (e.g., change javascript.js to the following):
$(document).on("click", "button", function(){
alert('Button is clicked');
$("#div1").load("test2.html");
});
$(document).on("click", "#b2", function(){
$("#div2").hide();
});
That watches for the click event on the document, but only fires the associated handler if the event passed through an element in the bubbling phase that matches the selector in the second argument. When firing the handler, jQuery makes it look a lot like you had the handler actually attached to that element, rather than to document.
There's a lot more in test2.html than there should be. jQuery will only append the bit in the body (and run the script, but we're removing that). test2.html should just be:
<div id="div2">
some content
<input type="button" id="b2" value="hide" />
</div>
Side note: If you're going to replace it on the next click, I'd use $("#div1").empty() rather than $("#div2").hide() so that you actually proactively remove the content you're going to replace later, rather than just hiding it.
For example I have the following HTML named index.html:
<html>
<head>
<style>
#content { float:left; }
#sub { float:right; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">
Sub content
</div>
</body>
</html>
And a simple JS file named action.js:
$(document).ready(function(){
$('button.loadSub').click(function(){
$('#sub').load('test.html');
});
$('button.hide').click(function(){
$('#sub').fadeOut('slow');
});
});
As you can see, when I click the button .loadSub the div #sub will be loaded with the new content from test.html:
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
I got two problems here:
Firstly, the .loadSub button did successfully load the the div of id subcontent, but the .hide button did not work.
Secondly, after I had tried inserting
script type="text/javascript" src="action.js"
inside test.html, the hide button worked and faded out its content. But then in turn, I found out that the button loadSub no longer functioned. I couldn't load the subcontent again.
Is there any other way around to just once declare source of js file and make my button.loadSub work whenever I click it? Could anybody please explain the problem and give me a hint to fix it.
You're loading dynamic HTML into your page. This means that at the time you called $('button.hide').click(), the button.hide element did not exist in your page yet, so the click handler could not be attached.
You might want to try doing a delegate attachment instead.
$('#sub').on('click', 'button.hide', function () {
$('#sub').fadeOut('slow');
});
On the first page, put this. You can insert my JQQuery code into your action.js file. On the second page, the one you are loading into your div, put the second Jquery code I added.
On First page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
#content{float:left;}
#sub{float:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">Sub content</div>
</body>
</html>
On the second page (the page that's loaded into the div, add this:
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
The hide button isn't on the page when you try to bind the event so it is never registered.
Change it to use on like this (assuming version 1.7+)
$(document).on('click', 'button.hide', function(){
$('#sub').fadeOut('slow');
});
or delegate if an older version:
$(document).delegate('button.hide', 'click', function(){
$('#sub').fadeOut('slow');
});
This attaches the event handler at the document level so will work for any new content added to the page.