I have a problem with my ui element (icon) with is a holder for draggable() function. the icon should append on click only once. The problem with my code is that when I am clicking on the icon it runs the code again and appending the next icon.
How avoid the event propagation in this case.Is there a better way to use the one() function here.
my code:
HTML structure:
<div class="editor">
<h1>Title</h2>
<p>paragraph</p>
<img src="">
</div>
<div class="editor">
<h1>Title</h2>
<p>paragraph</p>
<img src="">
</div>
<div class="editor">
<h1>Title</h2>
<p>paragraph</p>
<img src="">
</div>
JS:
$(document).on('click', '.editor *', function(event) {
$(this).resizable();
$(this).draggable({ handle: ".editor-move" });
$(this).one($(this).append("<i class='icon-move editor-move'></i>"));
return false;
});
Firstly, you need to make sure that the current target of the event is not the icon-move element, if so then exit.
if ($(event.target).hasClass("icon-move"))
return false;
Secondly, check whether the icon has been added already on subsequent clicks to avoid added multiple icons for the same element.
if($(".icon-move",this).length==0)
$(this).append("<i class='icon-move editor-move'></i>");
JSFiddle
$(document).on('click', '.editor *', function(event) {
event.stopPropagation();
$(this).resizable();
$(this).draggable({ handle: ".editor-move" });
$(this).one($(this).append("<i class='icon-move editor-move'></i>"));
return false;
});
Try
$(document).one('click', '.editor *', function(event) {
$(this).resizable();
$(this).draggable({ handle: ".editor-move" });
$(this).append("<i class='icon-move editor-move'></i>");
return false;
});
Related
I'm trying to make a script that allows me to click on one div and that click triggers click on another. This another element is outside and nowhere near this first element. These elemnts i want to trigger click on are dynamically generated. Site runs on wordpress.
Here are elements im clicking on, just simple divs, eleven dives total:
<div id="jedna">
</div>
<div id="dva">
</div>
<div id="tri">
</div>
etc..
Here are elemts i want to trigger click event on, these are generated:
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="1" data-swiper-slide-index="1"></div>
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="2" data-swiper-slide-index="2"></div>
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="3" data-swiper-slide-index="3"></div>
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="4" data-swiper-slide-index="4"></div>
I belive the only problem is that attaching events on these elements is not working even tho i attached it.
Here is full script, clicking function and attaching of events onto data-slide-number identifiers:
<script>
var $=jQuery.noConflict();
$(document).on('click', '#jedna', function(event) {
console.log($(this).html());
$('[data-slide-number="0"]').click();
});
$(document).on('click', '#dva', function(event) {
console.log($(this).html());
$('[data-slide-number="1"]').click();
});
$(document).on('click', '#tri', function(event) {
console.log($(this).html());
$('[data-slide-number="0"]').click();
});
$(document).on('click', '#styri', function(event) {
console.log($(this).html());
$('[data-slide-number="3"]').click();
});
$(document).on('click', '#pat', function(event) {
console.log($(this).html());
$('[data-slide-number="4"]').click();
});
$(document).on('click', '#sest', function(event) {
console.log($(this).html());
$('[data-slide-number="4"]').click();
});
$(document).on('click', '#sedem', function(event) {
console.log($(this).html());
$('[data-slide-number="6"]').click();
});
$(document).on('click', '#osem', function(event) {
console.log($(this).html());
$('[data-slide-number="7"]').click();
});
$(document).on('click', '#devat', function(event) {
console.log($(this).html());
$('[data-slide-number="8"]').click();
});
$(document).on('click', '#desat', function(event) {
console.log($(this).html());
$('[data-slide-number="9"]').click();
});
$(document).on('click', '#jedenast', function(event) {
console.log($(this).html());
$('[data-slide-number="10"]').click();
});
document.querySelectorAll('[data-slide-number]').forEach(item => {
item.addEventListener('click', event => {
console.log(item.getAttribute("data-slide-number"));
})
})
</script>
Any idea what am i missing ?
Here is website where you can check it out: http://www.sajdikyapartments.sk/
Its exactly in the middle, i want to click on building on image, that have hover efects on divs at top of them, and with that trigger clicking on tabs right above the image (01 Apartman, 02 Apartman etc..)
You're looking for .trigger( "click" ); (see JQuery documentation here https://api.jquery.com/trigger/).
So something like this maybe...
$(document).on('click', '#jedna', function() {
$('*[data-slide-number="0"]').trigger('click');
});
Followed by the HTML DOM:
<div class="opt">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
When i click on the .opt it would show the .panel content, but then i need to trigger another event to hide the .panel when clicking outside of the .opt element.
jQuery:
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
$this.blur(function(){
$this.find('.panel').fadeOut();
alert('i am from blur');
});
});
Here is a demo JsFiddle
But the blur() method is not executing, what i am doing wrong here technically?
You can try a click event on body instead of blur. Take a look at
https://jsfiddle.net/y0wsfpvb/7/
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
});
$('body').click(function (e){
if( $(e.target).closest(".opt").length > 0 == false) {
$('.panel').fadeOut();
alert('fake blur');
}
});
This works if you define de tabindex property for the div...
Try:
HTML
<div class="opt" tabindex="3">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
JS
$('.opt').click(function(){
$(this).find('.panel').fadeIn();
$(this).blur(function(){
$(this).find('.panel').fadeOut();
alert('i am from blur');
});
});
You could bind the fade out action to the body's on click handler, and then add:
event.stopPropagation();
to your opt class click handler to achieve this.
Here is an example on codepen
I'm working with someone else html else I would of approached this differenty, but I'm trying to create a simple accordion from it.
The problem is it only slides show the first lot of div, it should find its parent div and slide show.
JS
$('h3.jqueryheading').click(function() {
$(this).parent().find('div:first').slideToggle( "slow", function() {});
});
HTML
<h3 class="jqueryheading" style="cursor:pointer">Heading One</h3>
<div style="display:none;">
<p><img src="one.jpg"/></p>
<p><img src="two.jpg"/></p>
</div>
<h3 class="jqueryheading" style="cursor:pointer">Heading Two</h3>
<div style="display:none;">
<p><img src="three.jpg"/></p>
<p><img src="four.jpg"/></p>
</div>
Any ideas why this is happening?
Targeting the parent, then all DIV's gets you all the DIV's as they are children of the same parent, just target the next() DIV instead
$('h3.jqueryheading').click(function () {
$(this).next('div').slideToggle("slow");
});
FIDDLE
You can use next to target the next element
$('h3.jqueryheading').click(function() {
$(this).next().slideToggle( "slow", function() {});
});
Or the next div tag, if you want to be specific
$('h3.jqueryheading').click(function() {
$(this).next('div').slideToggle( "slow", function() {});
});
FIDDLE
Only one issue you have to use the :first-child or :eq(0)
$('h3.jqueryheading').click(function() {
$(this).parent().find('div:eq(0)').slideToggle( "slow", function() {});
});
<div class="row">
<img src="images/image.png" width="30" height="30" alt=""/>
View
</div>
$(".row").not(".row a").click(function(){
// irrelevant
})
I can't figure out why this isn't working. I don't want to call the function when "View" is clicked.
Is this ,what you were looking for?
$(".row").on('click',':not(a)', function(){
});
Adds 'click' event listener on all child elements of '.row', except 'a' elements.
Use this:
$(".row").click(function(){
});
$('.row a').click(function(e){
e.stopPropagation(); //this cancel the other events
});
I am building a theme selector for maps and want to reflect the currently selected theme.
The code seems to work but never returns the value of the "li" item, it always returns "s-thumbs" for whatever "li" item I click on. I tried using the .closest() method but to no avail.
I'm following this article.
<script language="javascript">
$("ul.s-thumbs").live("click", function(event) {
$("#theme_title").text(
$(this).closest("ul.s-thumbs li").attr("class")
);
});
</script>
<div id="theme">You have selected the <div id="theme_title"></div> Theme</div>
<div class="container_16" id="themebg">
<!--<div class="grid_1"> <a href="" "img" src="/styles/image/leftarrow.png" id="leftarrow" alt=""/></div>-->
<div class="grid_16 slider-wrapper">
<ul class="s-thumbs">
<li class="Default"> <img src="/styles/image/thumbs/default.png" alt="" />Default</li>
<li class="Hatchery"> <img src="/styles/image/thumbs/hatchery.png" alt="" />Hatchery</li>
</ul>
</div>
$("ul.s-thumbs").on("click", "li", function() {
var myText = $(this).attr("class");
alert( myText );
$("#theme_title").text( myText );
});
Demo jsFiddle
Use the .on() metod: http://api.jquery.com/on/ adding the specific element after the event (click)
This is a new replacement for the (today) deprecated .live() method.
$('ul.s-thumbs li').on('click', function(){
var getClass = $(this).attr('class');
$("#theme_title").text(getClass);
});
Demo link: http://jsfiddle.net/ChaseWest/w2tCE/4/
$("ul.s-thumbs").on("click", "a", function(event) {
var txt = $(this).closest("ul.s-thumbs li").attr("class");
$("#theme_title").text(txt);
});
NOTE live() has been deprecated.
Add the event handler to the li instead of the ul. I also used on which is the preferred method in Jquery 1.7+
$("ul.s-thumbs li").on("click", function(event) {
$("#theme-title").html(
$(this).attr("class")
);
});
Demo: http://jsfiddle.net/euSye/1/
<script language="javascript">
$(document).ready(function() {
$(".s-thumbs").on("click", "a", function(e) {
$("#theme_title").text( $(e.target).parent("li").attr("class") );
});
});
</script>