use Jquery to click hyperlink - javascript

I am trying to create a jquery to click a hyperlink but nothing seems to be working.
HTML
<main id="main" class="main-content">
<div class="container">
<div class="warning" role="alert">
no avail
Show all
</div>
what I was trying
$(".warning a").click()
Any suggestions?

Note that jQuery-initiated "click" events will fire the event but will not cause navigation to occur.
Instead you can read the link's HREF attribute and directly set the window location:
// The click event:
$('a').on("click", function() {
console.log("Click event fired");
})
var demo1 = function() {
// This will trigger the click event, but will not navigate.
$(".warning a").click()
}
var demo2 = function() {
// This will navigate but will not trigger the click event. (If you need both to happen, trigger the click event first, and consider delaying the window location update if necessary.)
var url = $(".warning a").attr("href")
window.location = url;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="main" class="main-content">
<div class="container">
<div class="warning" role="alert">
Show all
</div>
</div>
</main>
<!-- for demo: -->
<button onclick="demo1()">Won't work</button>
<button onclick="demo2()">Will work</button>

jQuery's .click() (without arguments) is a shortcut for .trigger("click"):
function(a,c) {
return arguments.length > 0 ? this.on(b, null, a, c) : this.trigger(b)
}
Therefore, it will not actually click the element, but just call the click event handlers attached to it, as you can see here:
const $link = $("a");
$link.on("click", () => {
console.log("Clicked? Not really...");
});
$link.click();
$link.trigger("click");
Show all
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You need to get a reference to the actual DOM element and then call HTMLElement.click() on that:
$("a")[0].click();
Show all
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can user the vanilla click method:
document.querySelector('.warning > a').click()
// equivalent jquery
//$('.warning > a')[0].click()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="warning" role="alert">
no avail
Show all
</div>

Whenever you select div class with hyperlink there you get array because you can have multiple hyperlinks so you need to add somthing like below
Code
$('.warning a')[0].click();
For reference link
Get working example for click event

If I need to redirect, I typically use window.location.href
window.location.href=$(".warning a").attr('href');

Related

jQuery / Bootstrap: Child DIV opens up Parent Modal

So I have nested DIVs and a simple version can be shown like this:
$('#parent').click(function() {
$('.parent').modal('show');
});
$('#child').click(function() {
$('.parent').modal('hide'); // Added to try and hide
$('.child').modal('show');
$('.parent').modal('hide'); // Added to try and hide
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">
</div>
</div>
The thing is when I click on the child div, the parent dialog also shows up behind the child dialog.
Any way to get around this?
It is happending because your child click event is bubbling up to the parent. Use e.stopPropogation() for the child div. This will prevent your click event from propogating to the parent.
$('#parent').click(function() {
$('.parent').modal('show');
});
$('#child').click(function(e) {
e.stopPropogation();
$('.parent').modal('hide'); // Added to try and hide
$('.child').modal('show');
$('.parent').modal('hide'); // Added to try and hide
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">
</div>
</div>
You can deal with such cases easily by mentioning the target in an attribute like below.
$('#parent, #child').click(function() {
var target = $(this).data('target');
$('.'+target).modal('show');
// write code to hide others if necessary
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent" data-target="parent">
<div id="child" data-target="child">
</div>
</div>
Try this before showing the modal:
$( '.modal' ).remove();
$( '.child' ).modal('show');
Remove the modal before using show. Hope this will fix your issue

delegate jQuery toggle event to the rest of the document

I have a dropdown menu activated on click.
I use toggle to activate it when you click on the .hello_panel
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello </div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
jQuery
$('.hello_panel').bind('click', function(){
$('.menu_popup').toggle();
})
if I click it it works fine, it does the show and hide effect when the .hello_panel
is clicked.
what I want is it to be shown if the .hello_panel is clicked and hidden back if when clicking anything else on the page except the .menu_popup
You can hide it whenever you click on the document
JavaScript
$(document).click(function () {
$('.menu_popup:visible').hide();
});
$('.hello_panel').bind('click', function (e) {
$('.menu_popup').toggle();
e.stopPropagation();
});
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello</div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
<div style="display:none" class="menu_popup">menu_popup</div>
Demo
http://jsfiddle.net/6bo1rjrt/16/
Another way if you don't want to stopPropagation is passing a call back function that registers a once time click listener to that document to hide the menu
$('.hello_panel').bind('click', function () {
$('.menu_popup').show(function () {
$(document).one('click', function () {
$('.menu_popup:visible').hide();
});
});
});
Demo
http://jsfiddle.net/6bo1rjrt/17/

Execute function on clicking any element in a page except for two elements (in jQuery Mobile, jQM)

Execute a function on clicking any element in a page (with id='home_page') except for two elements (id='link1', id='link2'). These two elements have different function to execute on click.
The below are the two jQuery codes I've tried unsuccessfully.
Code1:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page').not('#link1, #link2').click(function(){
alert();
});
});
Code2:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page:not(#link1, #link2)').click(function(){
alert();
});
});
The below is the jQM code for the page:
<div data-role="page" id="home_page">
<div data-role="header" data-theme="a" ><!-- Header -->
<a id='link1' href="/done" rel="external">Home</a>
<a id='link2' href="/exit" rel="external">Exit</a>
</div><!-- Header -->
<div data-role="content">
<p>Home Page</p>
<!-- Other elements -->
</div>
</div>
I think you should use .on() method for binding events and as suggested in other answer you have a missing closing tag }); for click event:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page').not('#link1, #link2').on('click touchstart', function(){
alert(); //---try adding "touchstart"--------^^^^^^^^^^
});
});
and make sure that you have stopped the event to bubble up on '#link1, #link2' links with event.stopPropagation(); only if you have bound some js events to these links.
As per your comments i just came with this:
$(function () {
$('#home_page').not('#link1, #link2').click(function () {
alert('page clicked');
});
$('#link1, #link2').click(function (e) {
e.stopPropagation(); //<---stops the event to bubble up
});
});
What i noticed you have mentioned the href for your anchor tag to http://www.google.com/, what seems to me that navigating to google is not working in the fiddle while other link is working properly.
Try to change the first link href to this:
<a id='link1' href="http://www.apple.com/mac/" rel="external">link1</a>
<a id='link2' href="http://www.apple.com/" rel="external">link2</a>
Demo # Fiddle
Seem like you're missing closing }) for your click function:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page').not('#link1, #link2').click(function(){
alert();
}); // <-- Here
});

Want to make inactive hyperlink

I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle
if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;
This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here
Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.
Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}

the div that show() called disappeared in the next second

When I click the div that suppose to show, it just showed in a second and then disappeared.
How do I make it stay display on the page?
Here is the code
<div class="circle0">
<h4>sketch & drawing</h4>
</div>
<div class="sec_down" style="display: none;">
<h1>{Mask}</h1>
</div>
<script>
$("#show_1").click(function () {
$(".sec_down").show();
});
</script>
You need to prevent the default click handling in the link so it won't process the href in the link and reload the page. in jQuery, you can do that by adding return(false) to the click handler:
<div class="circle0">
<h4>sketch & drawing</h4>
</div>
<div class="sec_down" style="display: none;">
<h1>{Mask}</h1>
</div>
<script>
$("#show_1").click(function () {
$(".sec_down").show();
return(false); // prevent default handling of the click
});
</script>
Change href="" to href="#" or break the default action of the link by using return false.

Categories