Develop Reference

jQuery: add click event to specific id

I have a small jquery problem:
My code is like this:
<div id="select-word-5" class="select-word-link"> - some content - </div>
<div id="select-5" class="select"> - some content - </div>
I have throughout my document several select-word-link and select divs.
I want to add a click event to the first div, that reacts just to the second div.
My idea was to loop through all the "select-x" elements, but i think there is a much better way?
$('.select-word-link').each(function()
{
var id = this.id;
var idLink = this.id.replace("-word", "");
$('.select').each(function()
{
if (idLink == this.id)
{
$(id).click(function() {
alert("this does not work");
});
});
});

You can do this easier by triggering an action on an event.
$('#select-5').click(function(){
alert('Does this work?');
});
$('.select-word-link').click(function(){
$('#select-5').trigger('click'); // will behave as if #select-5 is clicked.
});
Info: http://api.jquery.com/trigger/
More advanced:
$('#select-5').click(function(){
alert('Does this work?');
});
$('#select-6').click(function(){
alert('Does this work?');
});
// etc
$('.select-word-link').click(function(){
var selectId = this.id.replace('-word', '');
$('#'+selectId).trigger('click'); // will behave as if #select-5 is clicked.
});

maybe this code help you
$(".select-word-link").click(function(){
$(this).next().hide();
});
});

try
$('.select-word-link').first().on('click',function(){
// you code goes here
})

jQuery as CSS uses # selector to identify that this string is an Id.
e.g.
<div id="someId"></div>
and you execute this code:
$('#someId')
this will select the DOM object that has the Id someId
while id property returns the id of the DOM object without the selector # i.e. this jQuery code:
var id = $('#someId').get(0).id
will initialize the variable id to 'someId'
Thus, in your code add '#' in the selector
$('#' + id).click(function() {
alert("this does not work");
});

You have to trigger click next() element not all .select
$(".word").click(function() {
var selectId = this.id.replace('-word', '');
console.log(selectId);
$('#'+selectId).trigger('click');
});
$(".next").click(function() {
alert($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select-word-5" class="select-word-link word">- some content 5-</div>
<div id="select-word-6" class="select-word-link word">- some content 6-</div>
<div id="select-word-7" class="select-word-link word">- some content 7-</div>etc.
<div id="select-5" class="select-word-link next">- some content next 5-</div>
<div id="select-6" class="select-word-link next">- some content next 6-</div>
<div id="select-7" class="select-word-link next">- some content next 7-</div>

very simple solution
$('#select-5 , .select-word-link').click(function () {
// your code
});
If you want trigger same functionality from 2 or more different div ids or classes or combination of both then put separated by , like '#select-5 , .select-word-link' as shown in above example.

Disable a particular span using jQuery

I am creating a calendar event app where you can save people's birthday dates and edit people's names or dates whenever you want.
To display stored events I am using a forEach loop in JSP. I have a span named ld-option-okay-edit in each div. You can edit previous data after you click on that span and save your data.
But before clicking on the save button I am checking whether any field in a particular div is empty or not, using a jQuery hover function.
If any field is empty then I am disabling the span element so that it can't forward request to the servlet, but the problem is I am not able to disable it.
??????
THE PROBLEM
???????
My question is how can I disable a span through jQuery, or how can I prevent the onclick event of a span using jQuery?
Here is my code:
<c:forEach items="${relativeUser}" var="user">
<div class="elementsdiv">
<form action="<c:url value=" ******">" method="post">
<div class="cld-option-okay" >
<span class="glyphicon glyphicon-ok cld-option-okay-edit" name="cld-option-okay-edit" ></span>
</div>
<div class="cld-option-name" >
<input class="cld-name-input" value="${user.name}" placeholder="Name of the person" type="text" name="name">
</div>
</form>
</div>
</c:forEach>
What I have tried until now in jQuery is:
$(".elementsdiv").each(function (i, data) {
$($(data).find('.cld-option-okay')).hover(function (e) {
e.preventDefault();
if ($($(data).find('input[name="name"]')).val() === "") {
$($(data).find('span[name="cld-option-okay-edit"]')).addClass('disabled');//in this line i am getting trouble
}
}
});
For that line I even tried:
1)$($(data).find('span[name="cld-option-okay-edit"]')).attr("disabled","true");//with single quote also
2)$($(data).find('span[name="cld-option-okay-edit"]')).attr("disabled","disabled");//with single quote also
3).prop("disabled", true );
4).attr('disabled', '');
5).attr("disabled", "disabled");
6).off( "click", "**" );
7).unbind( "click", handler );
but when I apply:
`$($(data).find('span[name="cld-option-okay-edit"]')).hide()`;//it is applying
**********************
`$($(data).find('span[name="cld-option-okay-edit"]'))`till here code is working fine my problem is in applying disable.
previously i applied disable like below
$('.cld-option-okay-edit').addClass('disabled');
but it disables okay span in all divs
*************************

For enable or disable a span, you could do it like this:
var isEmpty = false;
$('#myDiv > input').keyup(function(){
isEmpty = false;
$('#myDiv > input').each(function(i,obj){
if(this.value == ""){
isEmpty = true;
return false;
}
});
// Styles for the span.
if( ! isEmpty){
$('#myDiv > span').removeClass('disabled');
} else {
$('#myDiv > span').addClass('disabled');
}
});
$('#myDiv > span').click(function(){
if(isEmpty){
alert("disabled");
} else {
alert("enabled");
}
});

I think this is what your code should look like based on what you have written, but I am not sure it is actually what you want to happen. If you want to disable it, you need to use prop()
$(".elementsdiv").each(function() {
var elem = $(this);
elem.find('.cld-option-okay').hover(function(e) {
if (elem.find('input[name="name"]').val() === "") {
elem.find('span[name="cld-option-okay-edit"]').addClass('disabled'); /*.prop("disabled",true); */
}
});
});

Prevent anchor click after one click

I am facing one issue, I want to disable anchor click after one click. I have
on-click attribute set in my anchor tag. Below is my HTML
<a style="cursor:pointer;" id="someId" onclick="Myfuntion()">Verify</a>
After I click "Verify" I am changing anchors text to "Verifying..." and one more thing I am trying to disable this anchor to avoid click in between the verification logic going on.
I have tried event.preventdefault() and also added disabled attribute to anchor.
But nothing works.
Please help!

If you were using jQuery for this you could have done this more easly.
Here we add a new class to a link to show that it has been clicked already. We check this when a click is made.
<a style="cursor:pointer;" id="someId">Verify</a>
$('#someId').on('click',function(){
//Check if button has class 'disabled' and then do your function.
if(! $(this).hasClass('disabled')){
$(this).addClass('disabled');
Myfuntion();
$(this).removeClass('disabled');
}
});

Here is a demo as to how it could be done using Javascript.
//Pass the event target to the function
function Myfuntion(elem) {
//If the element has no "data-status" attribute
if (!elem.getAttribute("data-status")) {
//Set attribute "data-status=progress"
elem.setAttribute("data-status", "progress");
//Change the text of the element
elem.textContent = "Verifying...";
//The setTimeout(s) below is only for the demp purpose
//Lets say, your verification process takes 4 seconds
//When complte
setTimeout(function() {
//Remove the attribute "data-status"
elem.removeAttribute("data-status");
//Notify the use that verification is done
elem.textContent = "Verified";
//Again, this is only for demo purpose
setTimeout(function() {
//User may verify again
elem.textContent = "Verify";
}, 1000);
}, 4000);
}
return false;
}
Link to the demo

There are plenty of ways to do this; one simple approach is to just redefine the function itself:
var myFunction = function() {
alert('clicked');
// do whatever your function needs to do on first click, then:
myFunction = function() { // redefine it
// to no-op, or to another action
alert('second click');
}
}
<a onclick="myFunction()">click me</a>

How to hide a div if the user cicks anywhere on the page except 2 elements using jQuery?

I have the following markup:
Click Me
<div id="foo" style="border:1px solid red; display:hidden"></div>
My code to get the "foo" div to show on click.
$('#clickMe').click(function(e) {
$('#foo').show();
e.preventDefault();
});
Now how can I hide the div again IF THE USER CLICKS ANYWHERE ON THE PAGE EXCEPT THE DIV ITSELF OR THE CLICK ME LINK?
Note: I need to be able to do this without changing the markup.

$('#clickMe').click(function(e) {
$('#foo').show();
e.preventDefault();
});
$("#clickMe, #foo").mouseup(function(){return false;});
$(document).mouseup(function(e){//removes menu when clicked on any other part of page
if($("#foo:visible").length > 0 ){
$('#foo').hide();
}
});
Example on JSFIDDLE.net

Try this:
$(document).click(function() {
$("#foo").hide();
});
$("#foo, #clickMe").click(function() {
return false;
});

$('#clickMe, #foo').click(function() {
$('#foo').show();
return false;
});
$(":not(#clickMe, #foo)").click(function() {
$('#foo').hide();
});
Check it out on JSFiddle.

You can put a click handler on document.body so it gets clicks from every element on the page. You can check the target property of the event object to see what was actually clicked on and if it does not have the ID's of those two elements you can hide your <div>.
$(document.body).click(function(event){
var targetID = $(event.target).attr("id");
if( targetID !== "clickMe" && targetID !== "foo" ){
$("#foo").hide();
}
});
Try it out!

Jquery anchor tag display problem

I am unable to show an anchor tag to display itself using .show() in Jquery or javascript. Conn Window is visible by default. It hides and displays the div but it is unable to do the same with anchor. I have manually tried to change it in firebug/IE dev tools and it works there. It just doesn't work when I do it with jquery/javascript.
Here is the HTML code:
<div id="connWindow">Conn Window
<div id="closeButton" onclick="javascript:connHide();"></div>
</div>
Here is the jquery code:
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
Any help will be greatly appreciated!

Why not bind your click events in jQuery as well
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
$(document).ready(function () {
$("#contab").click(function () {
connShow();
return false;
});
$("#connWindow").click(function() {
connHide();
});
});

The inline CSS display:none is overriding the mechanism jQuery uses to show and hide.
Hide the anchor programmatically instead:
HTML:
<div id="connWindow">
Conn Window
<div id="closeButton"></div>
</div>
Script:
$(function() { // on document load
$('#connTab').css('display', 'none');
// I'm going to replace your inline JS with event handlers here:
$('#connTab').click(function() { connShow(); return false; });
$('#closeButton').click(function() { connHide(); });
});
function connHide() {
$('#connTab').css('display', '');
$('#connWindow').css('display', 'none');
}
function connShow() {
$('#connWindow').css('display', '');
$('#connTab').css('display', 'none');
}
Hope that helps.

You don't need to state javascript: for onclick events. Try changing to:
<div id="closeButton" onclick="connHide();"></div>
I would also change the first line to the following: