I have next html:
<a href="https://google.com" >
<div id="first"></div>
<div id="second"></div>
</a>
Currently when I click to div #first it takes me to https://google.com.I don't want it. I want to not have effect anchor on div #first, so when I click on div #first nothing is happen.
And I cannot handle anchor, let say that I can add javascript just for div #first.
EDIT
I forgot to tell that my div contain form with attached event submit:
<script>
function submitForm(_this){
//do Ajax call
return false;
}
</script>
<a href="https://google.com" >
<div id="first"></div>
<form method="post" onsubmit="return submitForm(this)">
<input id="email" name="Email" type="text">
<input id="submit" name="submit" value="Register" type="submit">
<form>
<div id="second"></div>
</a>
So if I add this:
<script>
jQuery("#first").on("click", function (e) { e.preventDefault(); });
</script>
Then my form doesn't work.
EDIT
So if add e.stopPropagation() on input submit click, like this
<script>
jQuery("#submit").on("click", function (e) { e.stopPropagation(); });
jQuery("#first").on("click", function (e) { e.preventDefault(); });
</script>
It will work fine, but e.stopPropagation(); doesn't work on fine in Safari. In Safari when I click on input submit it still leads me to the anchor link.
cancel the click with preventDefault
$("#firs").on("click", function (e) { e.preventDefault(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://example.com" >
<div id="firs">X</div>
<div id="second">Y</div>
</a>
Either dont't put the div in the anchor, or use the following:
document.getElementById('firs').addEventListener('click', function(event) {
event.preventDefault();
});
I think that this might help (your id says firs but sake of spelling I'll put first)
$("#first *").attr("disabled", "disabled").off('click');
use the following
event.preventDefault()
Related
I want to trigger the click on a tag which has div with id='a'.
$(document).ready(function() {
$("#chat_list_content a:has(div[id='a'])").click();
//$("#chat_list_content a:has(div[id='a'])").trigger("click");
$('#chat_list_content a').click(function() {
alert('you are here');
})
})
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="chat_list_content">
<a href="#">
<div id="a">A</div>
</a>
<a href="#">
<div id="b">B</div>
</a>
</div>
Click should happen automatically and output alert box. But, there is no respond from the code.
Thanks in advance.
When you call $("#chat_list_content a:has(div[id='a'])").click(), the custom click handler is not yet described yet. That means it doesn't do anything. You just need to move the click trigger below the click function definition:
$(document).ready(function() {
//$("#chat_list_content a:has(div[id='a'])").trigger("click");
$("#chat_list_content a").click(function() {
alert("you are here");
});
// Make sure to add this after the click handler definition above
$("#chat_list_content a:has(div[id='a'])").click();
});
working sandbox: https://codesandbox.io/s/exciting-gagarin-t55er
There is no need to use :has() here at all, you can simply use Attribute Equals Selector [name="value"] to achieve what you are looking for.
$(document).ready(function(){
$('#chat_list_content a').click(function(){
alert('you are here at '+ $(this).index());
});
$('#chat_list_content a div[id=a]').click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chat_list_content">
<a href="#">
<div id="a">A</div>
</a>
<a href="#">
<div id="b">B</div>
</a>
</div>
I need to hide the div with id = SDWN when the user clicks any other place in the document.
<div id="SDWN" onclick="OKIJUYG()">
<img src="../img/lupa.png" ID="ILDSIB" onclick="OKIJUYGA()" >
</div>
<div id="ATSIMD">
<div class="arrow-up" id="SHS">
</div>
<div id="Vsauceisgenius" tabindex="-1" >
<img src="../img/x.png" id="CTSO" href="#">
<input type="text" placeholder="People" id="IMOHD">
<input type="submit" value="Search" id="DPMM">
<P></P>
<input type="text" placeholder="Hashtags" id="IMOHDS">
<input type="submit" value="Search" id="DPMMM">
</div>
</div>
You can use event.target to check if the element was clicked, and if it was not, then hide it:
$(document).click(function(event) {
if (event.target !== $("#ATSIMD") && event.target !== $("#SHS") {
$("#ATSIMD").hide();
}
});
Use $(document).click() to hide div on click anywhere. Then add click binding to your div and use event.stopPropagation() to stop event bubbling.
$(document).click(function(){
$("#SDWN").hide();
});
/* Clicks within the dropdown won't make
it past the dropdown itself */
$("#SDWN").click(function(e){
e.stopPropagation();
});
"Other Place" I think is any other item other than #SDWN, try this code:
if (document.body.addEventListener){
document.body.addEventListener('click', function(e){
if(e.target == document.getElementById("SDWN")) return;
document.getElementById("SDWN").style.display = "none";
});
} else if (document.body.attachEvent){
document.body.attachEvent('onclick', function(e){
if(e.target == document.getElementById("SDWN")) return;
document.getElementById("SDWN").style.display = "none";
});
}
Try yourself:
https://jsfiddle.net/Frogmouth/pyptkzms/
This solution not need jQuery.
But I don't like this solution, meybe you can find an other one.
[FYI: i am not allowed to change how it was marked up. div will be clicked.. not a button or anchor]
i have a menu(that should pass on accessibility standards) that will open its submenu when clicked.
this is the onclick function, and i need to do the same function when pressing enter key,
// parent menu (this will repeat)
<div onclick="javascript:ToggleMenu('Calendar');" class="menu-item" style="cursor: hand;" tabindex="2">
<p>Calendar</p>
</div>
//submenu (this will repeat)
<div id="Calendar" class="menu-subitem" style="display: none;" tabindex="2">
<a onclick="Audit(this)" tabindex="2" href="Calendar/CalendarAssignment.aspx" id="TM_C1">Calendar Assignment</a>
<a onclick="Audit(this)" tabindex="2" href="Calendar/ShiftAssignment.aspx" id="TM_C2">Shift Assignment</a>
</div>
thanks!
i tried my best to be clear whew!
Here's the accessible solution while keeping a div:
<div id="foo" role="button" tabindex="0">Toggle menu</div>
<script>
$('#foo').click(function() {
ToggleMenu('<%# Container.DataItem.FuncID %>');
}).keydown(function(e) {
if (e.which === 32 || e.which === 13) {
this.click();
}
});
</script>
But honestly you should just use a button:
<button id="foo">Toggle menu</button>
<script>
$('#foo').click(function() {
ToggleMenu('<%# Container.DataItem.FuncID %>');
});
</script>
This will do it when they hit the enter key anywhere on the page
<div onclick="javascript:ToggleMenu('<%# Container.DataItem.FuncID %>');">
<script>
document.addEventListener("keypress", function (evt)
{
if (evt.keyCode === 13) {
//they pressed enter
//now get the divevent
var div = document.querySelector('div[onclick*="ToggleMenu"]');
//trigger the event
div.onclick.apply(div);
}
}
);
</script>
I can see you have an error in your code
onclick"javascript:xxxx"
is not correct,
"javascript:xxx"
should using on "a" tag "href" attribute, just remove the "javascript:" in your onclick attribute and you may get what you want.
My code:
Jquery part:
$('#yesdownloadvideo').click(function(){
var expiryTime = parseInt($('#expirytime').val());
$('#fade, #popuprel').fadeOut()
setCookie("emailpopup","cookie already set",expiryTime);
});
Html part:
<div class="yes-btn"><a id="yesdownloadvideo" href="<%=yesbuttonlink%>.html" target="_blank" style="text-decoration:none"><input type="submit" class="yesbtn-src" value="<%=yesText%>" /></a></div>
Use preventDefault() like,
$('#yesdownloadvideo').click(function(e){
e.preventDefault();
var expiryTime = parseInt($('#expirytime').val());
$('#fade, #popuprel').fadeOut()
setCookie("emailpopup","cookie already set",expiryTime);
});
Also change your html like
// Remove your submit button from link
<div class="yes-btn">
<a id="yesdownloadvideo" href="<%=yesbuttonlink%>.html" target="_blank"
style="text-decoration:none"><%=yesText%></a>
</div>
Or add submit after link
<div class="yes-btn">
<a id="yesdownloadvideo" href="<%=yesbuttonlink%>.html" target="_blank"
style="text-decoration:none"><%=yesText%></a>
<input type="submit" class="yesbtn-src" value="<%=yesText%>" />
</div>
Your HTML is invalid. You cannot have an input inside an a. Browser recovery from that error is inconstant. It looks like the input is trapping the click in IE.
You can have either a link or a submit button there, but not both.
I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <span> element further down the page.
When <button id="people"> hasClass('user_view_active') the HTML link should display "People" when <button id="jobs"> hasClass('user_view_active') the HTML link should display "Jobs".
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('button').each(function(){
$(this).removeClass('user_view_active');
});
$(this).addClass('user_view_active');
});
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").attr("href").text(text.replace('People'));
}else{
$('.title').find("a").attr("href").text(text.replace('Jobs'));
}
});
</script>
</head>
<body>
<div id="container">
<header>
<img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
<button id="jobs" class="user_view">Jobs</button>
<button id="people" class="user_view_active user_view">People</button>
<div class="header_search_wrapper">
<form action="" method="POST">
<textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>
<input type="submit" class="share_btn" value="Search">
</form>
</div>
</header>
<div id="main" role="main">
<!--! begin app content -->
<div class="right_sidebar">
<span class="right_title">Connection Suggestions</title>
</div>
<span class="title">Recent Updates >> People</span>
To replace the text within a link you can use the jQuery .text() function. This function can also get the text value and also set the text value - as is shown in the example below -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
This code would have to be wrapped in the callback function of the click event to work -
$(document).ready(function() {
$('button').click(function(){
$('button').removeClass('user_view_active');
$(this).addClass('user_view_active');
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
});
});
Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.
Okeydokey ?
Are you sure those are the right tags ?
<span class="right_title">Connection Suggestions</title>
Are you sure an <a> element inside a <button> element is a good idea?
<button id="jobs" class="user_view">Jobs</button>
role="main" is'nt a valid attribute, but will probably work anyway.
This just seems easier:
$(document).ready(function() {
$('button').on('click', function(){
$('button').removeClass('user_view_active');;
$(this).addClass('user_view_active');
$("a", ".title").text(this.id);
});
});
FIDDLE
Try this way:
$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');