Trigging tap event jquery mobile - javascript

I'm pretty new to Jquery Mobile and I'm trying to trig a tap event.
It's working. If I click the div the class will be added. But if I click the a tag the class will be added to the a tag too.
How can I make the class be added just to the div, no matter if I click the div or a?
Here is the code:
<div id="measure-success">
<div class="measures">How long to prepare each campaign?</div>
<div class="measures">Size of Database</div>
</div>
$(function() {
$("#measure-success .measures").bind("tap", tapHandler);
function tapHandler (event) {
$(event.target).addClass("tap");
}
});

Change $(event.target) to $(this) leave the rest of the code as is.

Related

Mouse out event doesn't move back outside the button

I have a button and when you hover over it, it shows some text and 2 more buttons but when I move my mouse out of it, it still stays on the hover. How do I make my code work so that it works on mouse out?
This is my Javascript:
var option1Button_Mouseout = function() {
console.log('option1Button_Mouseout()');
$('laStyle-option1-button')[0].innerHTML = outputTag;
};
var attachOption1ButtonListeners = function() {
console.log($('laStyle-option1-button')[0]);
$('laStyle-option1-button')[0].addEventListener('mouseover', this.option1Button_Mouseover);
// When you mouse out of the button it brings it back to the original
$('laStyle-option1-button')[0].addEventListener('mouseout', this.option1Button_Mouseout);
};
window.onload = function() {
this.attachOption1ButtonListeners();
};
this is what it currently looks like:
https://media.giphy.com/media/9A6MoIdWBiZVFtcHyW/source.mp4
See when I hover over it it shows text and 2 buttons, when I mouse out it should go back to the picture of the hand.
Sind it is not clear what your methods are doing, consider this example:
HTML
<div id="myDiv">
<div id="myDiv1"/>
</div>
JavaScript
$('#myDiv').on("mouseover mouseenter ", function (e) {
$("#myDiv1").show();
});
$('#myDiv').on("mouseleave mouseout", function (e) {
$("#myDiv1").hide();
});
When entering the parent div the inner div will be shown. When leaving the parent div the inner div will be hidden. Also using .on as you are using jquery.
Here is the JSFiddle: https://jsfiddle.net/GR8sk/21/
Since you're already using jQuery I would use its Mouseenter and mouseleave events like so:
$("document").ready(function(){
$(".laStyle-option1-button img").mouseenter(function(){
$(this).attr('src','https://media.giphy.com/media/xUOwGdPZ0chBWiQ6Ri/giphy.gif');
});
$(".laStyle-option1-button img").mouseleave(function(){
$(this).attr('src','https://media.giphy.com/media/l4pTgiQB2e2dpuKs0/giphy.gif');
});
});
Couple things to note:
You did not add a '.' to the beginning of your jQuery reference to laStyle-option1-button (look at how the period goes before) because its a class attribute.
You are performing unnecessary event listener loading. While this can be helpful for binding to click events, I would just use the 'bind' method to bind functions to click events:
$( "#btnButton" ).bind( "click", myFunction);
You need to change either the 'src' attribute of the image, or just remove the button completely and replace with another one. The former is better performing.

Trigger a click on a span using jQuery

I want to click a span using jQuery. (I'm using rails and foundation)
<div class = "row my-row" id="current-my-row">
<div class = "large-12 my-row-heading" id="my-row-click">
<%= image_tag "some_img.png"%>
<span class="title">This is the title</span>
<span class="details"><%= image_tag "other_img.png"%>DETAILS</span>
</div>
<div class = "large-12 my-row-details">
all details
</div>
</div>
I have a jQuery function:
$('.details').on("click", function() {
.... whatever I want it to do...
//my-row-details slides down.
}
On clicking "DETAILS", whatever I want it to do happens.
But, as part of another jQuery function I want to trigger a click on it.
I tried :
$('.details').click();
$('.details').trigger("click");
$('#my-row-click .details').click();
$('#my-row-click').trigger("click");
$('.details').trigger("click");
$('#my-row-click > span:nth-child(3)').click();
$('#my-row-click > span:nth-child(3)').trigger("click");
But I can't seem to trigger a click. i.e. my-row-details does not slide down.
Any help?
UPDATE:
commented all the other code: (assume this is all the function on click does)
$('.details').on("click", function() {
$('.my-row-details').slideDown();
}
Instead of triggering a click, I tried replacing it with this line:
`$('.my-row-details').slideDown();`
This won't work either. But it works if I actually go click "DETAILS"
Both .click() and .trigger("click"); should actually work.
However, triggering an event, defined in your own code, sounds like a bad idea.
There is a better way to do this:
function openDetails() {
// Whatever you want to do
}
$('.details').on("click", openDetails);
"as part of another jquery function":
openDetails();
That way, you can be sure that this behavior is achieved, in a clear and readable way.
Found the problem.
The function that was calling the click() was to be executed on page load. Not on an event. And I had specified $('.my-row-details').hide(); on page load as well. Both of them were contradicting each other.
The solution was to specify display: none for my-row-details in css. And then call .click(); from jquery.
First check whether the click for that span is working or not by keeping an alert inside the click function, if it is not working then try this
$('.details').live('click', function(){
//your logic goes here
});
or your can try this
$(".details").bind("click", function(){
//your logic
});
Hope it works

jQuery .html() not setting html at all

I have a simple thing. When a user clicks on the edit link it turns the previous element into an input element for editing and the edit into a cancel. If the user decides not to edit he can click on cancel and everything should revert to its initial state.
Right now this is not working at all:
$('.cancel').on('click', function() {
$(this).parent().html("<a href='#'>edit</a>");
});
HTML:
<div class='photo-section'>
<div class='photo-head'>
<div class='photo-info'>
Photo Name : <span class='photo-name'>Work selfie</span>
<span class='title-edit'><a href='#'>edit</a></span>
</div>
</div>
<div class='photo'>
<img src='' alt='' title=''>
</div>
<div class='tag-section'>
<div class='tags'>Photo Tags:
<span>#code#coffee#late#night</span>
<span class="tags-edit">edit</span>
</div>
</div>
</div>
CSS:
// JavaScript to handle photo operations
$(document).ready(function() {
// show/hide edit option
$('.photo-info, .tags').hover(function() {
$(this).find('.title-edit > a, .tags-edit > a').addClass('visible');
}, function() {
$(this).find('.title-edit > a, .tags-edit > a').removeClass('visible');
});
// show editable area
$('.title-edit, .tags-edit').on('click', function () {
edit(this);
});
});
function edit(elem) {
// change element into an input elemnt for editing
var $item = $(elem).prev();
var text = $item.text();
$item.html("<input type='text'>").find('input').attr('value', text);
// change edit to cancel if input element present
if ($('input').length) {
$item.next().html("<a href='#' class='cancel'>cancel</a>");
}
// change cancel back to edit
if ($('.cancel').length) {
$('.cancel').on('click', function() {
$(this).parent().html("<a href='#'>edit</a>");
});
}
}
Result: https://jsfiddle.net/hgwkxygz/6/
Any help would be great!
This is a very common case of attaching event at wrong time in javascript.
Actually you are removing and re-adding a DOM element. So the already attached event to .cancel won't work this time. You again have to write event listener on .cancel whenever you attach a new DOM element after clicking on edit button.
Basically it means whenever you do .html(), you have to re-add event listener for click.
There are various approach to solve this problem.
1) make a function which attach the DOM element as well as click event to that DOM element. Call that function only on click events.
2)Do event delegation.
3)Do not remove DOM elements on click events, rather hide and show elements so that you wont loose your event listeners.
4)If you really have to do remove and re-add DOM elements then in my opinion, best approach is to make a class, where you make DOM elements, add event listeners privately in that class, and on click events just make new instance of that class.
You can check out these options in detail on web.

Void JS Click in Pop-up area of "lightbox"

I'm making a super simple "lightbox" that pops up with a dialog box, and a dimmed background.
My problem is, I want the overlay to disappear when the user clicks on the dimmed background, but not if they click in the dialog box area.
My approach so far has been this:
I added a class with "display:none;" to the the wrapper so it would disappear if clicked. Of course, if you click in the #dialogBox this makes the overlay disappear as well. Is there any way to tell it to return the click false in the dialogBox area? Or a better way to approach this?
<div id="overlay" onclick="$(this).addClass('displayNone');">
<div id="dialogBox">
<p>Lorem ipsum</p>
</div>
</div><!-- /#overlay -->
Thank you!
Remove the inline onclick attribute/handler, and bind the event in JavaScript:
$("#overlay").on("click", function (e) {
if (!$(e.target).closest("#dialogBox").length) {
$(this).addClass('displayNone');
}
});
DEMO: http://jsfiddle.net/A7rNE/
This will check if the click came from anywhere within the #dialogBox element - if it didn't (note the ! in the if statement), it runs the .addClass() part.
References:
.on(): http://api.jquery.com/on/
.closest(): http://api.jquery.com/closest/
This should prevent the click event from bubbling up to whatever element handles closing the lightbox:
$('#dialogBox').click(function(e) {
e.stopPropagation();
})

jquery add and remove class problem

I'm trying to bind a function with a non-existent class. I will try to explain
my js:
function hidelink()
{
$('#user_form').hide();
$('.selected').text("New User").removeClass('selected').addClass('unselected');
return false;
}
function showlink()
{
$('#user_form').show();
$('.unselected').text("Hide it").removeClass('unselected').addClass('selected');
return false;
}
$(function(){
$('#user_form').hide();
$('.unselected').click(showlink);
$('.selected').click(hidelink);
});
my html:
<div id="user_form">
My Link
</div>
So basically, when you click in the link it will change the classes (selected/unselected) and hide/show a div. The problem is that, when i click once, it shows the form, but if i click again in the link, the form don't hides again. Maybe because i'm biding the events when the page loads and at this time there is not element that match the selector ".selected".. makes sense?
Maybe because i'm biding the events when the page loads and at this time there is not element that match the selector ".selected"..
Yes. Use live().

Categories