Using jquery can click based on class and id attributes but can click be invoked based on ref attribute ?
I've based below code on ref="btFirst", but unsure how to access ref.
JSFiddle src:
<button class="ag-paging-button" onclick="alert('Hello world!')" ref="btFirst" data-vivaldi-spatnav-clickable="1">First</button>
$( ".btFirst" ).click(function() {
alert( "Handler for .click() called." );
});
Use CSS attribute selector (nice and thorough CSS Tricks reference):
$('[ref="btFirst"]').on("click", function(e) {
alert( "Handler for .click() called." );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button ref="btFirst">Click me</button>
You can use
$('button[ref="btFirst"]').on('click', function(e){
alert('ref button clicked');
});
$('button[ref="btFirst"]').on('click', function(e){
alert('ref button clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button class="ag-paging-button" onclick="alert('Hello world!')" ref="btFirst" data-vivaldi-spatnav-clickable="1">First</button>
If you want to be more specific:
Html:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button class="ag-paging-button" ref="btFirst" data-vivaldi-spatnav-clickable="1">First</button>
</body>
</html>
jQuery:
$(document).ready(function(){
$( "button.ag-paging-button[ref='btFirst']" ).on('click', function() {
alert( "Handler for .click() called." );
});
});
You dont need to add onclick="alert('Hello world!')" in button tag
Hope this may help you.
Related
I'm just starting with JQuery and generally web development, so this question might be really easy but I would appreciate your help.
Javascript code:
$(document).ready(function(){
$("#convbut").click(function() {
alert( "Handler for .click() called." );
});
});
HTML button:
<button name="conversion" type="button" id="#convbut">Convert</button>
When clicking Convert button I am not getting alert message.
I don't know what error you have in your console. Make sure you have loaded the jquery library first. I have added full code here so as you haven't and is working great
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button name="conversion" type="button" id="convbut">Convert</button>
<script>
$(document).ready(function(){
$("#convbut").click(function(){
alert( "Handler for .click() called." );
});
});
</script>
</body>
</html>
Your html
<button name="conversion" type="button" id="#convbut">Convert</button>
use this by remove # before id;
<button name="conversion" type="button" id="convbut">Convert</button>
I realized the problem, I need HASH in JQuery before ID name without ID actually having it in index.html
Javascript:
$(document).ready(function(){
$("#convbut").click(function() {
alert( "Handler for .click() called." );
});
});
HTML:
<button name="conversion" type="button" id="convbut">Convert</button>
$( document ).ready(function() {
$(".exmore").before("<span class='rmtrail'>...</span>");
$(document).on("click",".exmore", function(e){
console.log("clicked");
console.log($(this).siblings("rmtrail").html());
$(this).siblings("rmtrail").toggle();
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<a href='#' class='exmore'>open</a>
</body>
</html>
I am trying to toggle the inserted .rmtrail element when the .exmore element is clicked but the $(this).siblings(); method is not working. console.log() returns undefined.
Is there a way to force the jQuery DOM to update after an element is inserted? I have been looking online and can not find it.
rmtrail is a class so try .rmtrail
$( document ).ready(function() {
$(".exmore").before("<span class='rmtrail'>...</span>");
$(document).on("click",".exmore", function(e){
console.log("clicked");
console.log($(this).siblings(".rmtrail").html());
$(this).siblings(".rmtrail").toggle();
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<a href='#' class='exmore'>open</a>
</body>
</html>
I want to trigger click on an icon(image) with specific class/id using onclick (or using any other way) of another button. Please see image for reference. Clicking "1" should trigger "2". Currently I am calling a javascript function "launchTopWM" which use following code to trigger click:
$(".custom_toggle_menu_default").trigger("click");
But i am wondering if i can call this code or perform this fucntionality using its click etc, something like href='javascript:$(".custom_toggle_menu_default").trigger("click");'
Following is the Code:
HTML 1:
<img class="custom_toggle_menu_default" src="cc/tt/uu/images/launchTopWM.png">
HTML 2:
<a id="tsp" class="sp" href="launchTopWM()">CNw</a>
Give an id to the element and show the second anchor through pure javascript.
<!DOCTPE html>
<html>
<head>
<title> Button style </title>
<style>
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="getElementById('button').click()" > click me </a>
<button id="button"> Buton </button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#button').click(function(){
alert('Buttons has been clicked');
});
</script>
</body>
</html>
Trigger example, Hope it will give you the idea
<html lang="en">
<head>
<meta charset="utf-8">
<title>Triggger</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="tiggerCall">Trigger Focus</button>
<input type="text" placeholder="Onclick Call Focus" value=''>
<script>
$( "#tiggerCall" ).click(function() {
$( "input" ).trigger( "focus" );
});
$( "input" ).focus(function() {
$( "<span>Text box clicked</span>" ).appendTo( "body" ).fadeOut( 1000 );
});
</script>
</body>
</html>
The Jquery Focus is not working for a single input button click is working only problem is with the input field as shown in the below code:
Not working only for single input field.
$(document).ready(function(){
$("#val").change(function(){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn1").click(function(){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn2").click(function(){
$("input").blur();
$("p").html("blur event triggered");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
Enter your name: <input id="val" type="text">
<br><br>
<button id="btn1">Trigger focus event</button>
<button id="btn2">Trigger blur event</button>
<p style="color:red"></p>
</body>
</html>
I have added the jsfiddle link below :https://jsfiddle.net/Manishankarg/0ony2ovb/
If what you want to achieve is to retain focus even on clicking tab then you will have to use keydown() instead of change().
Actually your code is working fine. Only that the change() is not triggered the second time you press tab without changing the input.
$(document).ready(function(){
$("#val").keydown(function(e){
if(e.which == 9) {
e.preventDefault();
$("p").html("focus event triggered");
}
});
$("#btn1").click(function(){
$("#val").focus();
$("p").html("focus event triggered");
});
$("#btn2").click(function(){
$("input").blur();
$("p").html("blur event triggered");
});
});
I have added the jsfiddle link below : Keydown Example
$(document).ready(function(){
$("#val").on('input', function(){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn1").click(function(){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn2").click(function(){
$("input").blur();
$("p").html("blur event triggered");
});
});
i think what you're trying to do is to trigger change event when input value changed
If i understand you're question correct you just have to change the change function to the blur function in your javascript function.
This will trigger the focus on the input element.
$(document).ready(function(){
$("#val").on('blur', function(e){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn1").click(function(){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn2").click(function(){
$("input").blur();
$("p").html("blur event triggered");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
Enter your name: <input id="val" type="text">
<br><br>
<button id="btn1">Trigger focus event</button>
<button id="btn2">Trigger blur event</button>
<p style="color:red"></p>
</body>
</html>
I am trying to get a single form value from a posted form using HTML and Jquery could anyone tell me what I am doing wrong with the following script.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form id="target" action="1.html">
<input type="text" value="Hello world">
<input type="submit" value="Go">
</form>
<script>
$( "#target" ).submit(function( event ) {
var input = $("#target :input[text]");
alert( input);
console.log(input)
event.preventDefault();
});
</script>";
</body>
</html>
I can only seem to return an object but I cant display this using alert or the console.log feature.
var input = $("#target :input[text]");
should be:
var input = $("#target input[type='text']").val();
Wrap your submit event in ready function
$(document).ready(function(){
$( "#target" ).submit(function( event ) {
var input = $("#target input[text]").val();
alert( input);
console.log(input)
event.preventDefault();
});
});