Jquery Click Event Is Larger Than Button - javascript

I'm having some issues with the Jquery click event. The event is firing when I click the button but it also will fire when I click to the side of the button which produces an undesirable affect in the application I'm building. I've included a JSFiddle below which demonstrates this issue. If you click to the right of the 'Next' button the event will still fire. Also if you take out the javascript this behavior disappears.
JSFiddle
Javascript shown below:
$(function() {
$(" #sortable ").sortable({axis: "x", containment: "window"});
$( ".clicked" ).click( function() {
var sortedIDs = $( "#sortable" ).sortable( "toArray", {attribute: 'custom-cl'} );
alert(sortedIDs);
var target = "http://localhost:3000/langs";
$.ajax({
type: 'get',
url: target + '?order='+sortedIDs.join(',') ,
dataType: 'script'
});
});
});
Any ideas on how to resolve this issue and contain the click event within the button?
Thanks for the help in advance!

That's because your click handler is set on the div that contains the button. If you want it only for the button element, give it an id and set it on that instead.
<div class="clicked"><button id="next" type="button">Next</button></div>
$('#next').click(function(){..});

It's because the div has display:block by default (which has width 100% of parent), you can just set it to inline-block:
.clicked {
display:inline-block;
}
Demo

change this
<div class="clicked"><button type="button">Next</button></div>
into this
<div><button type="button" class="clicked">Next</button></div>
and try

why not change to this:
$( ".clicked button" ).click( function() {

Related

jquery event handler only running once

I am having problems with jqueries "click" event handler, its working only once, and then it stops, please I need help fixing it.
What I did is, I use an image as a button, for my Web app but, through jquery, but it only runs once.
Here is the code:
$( document ).ready(function refresh() {
$(".menu_button").click(() => {
$("nav").addClass("open-menu");
});
});
$( document ).ready(function() {
$(".cancel_menu").click(() => {
$("nav").removeClass("open-menu").css("transform", "translatex(100%)").css("transition-duration", "2s")
});
});
Please tell me if you need more info, Thanks.
The problem I don't think is with the jquery. Your cancel menu moves the menu all the way to the right, but you never bring it back.
I reset the transform to none on the click of the menu button and it works.
Below is the relevant line in the menu_button click event handler
$("nav").addClass("open-menu").css("transform", "none");
$( document ).ready(function refresh() {
$(".menu_button").click(() => {
$("nav").addClass("open-menu").css("transform", "none");
});
});
$( document ).ready(function() {
$(".cancel_menu").click(() => {
$("nav").removeClass("open-menu").css("transform", "translatex(100%)").css("transition-duration", "2s")
});
});
.open-menu{
background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="menu_button">OPEN</button>
<button class="cancel_menu">CANCEL</button>
<nav>NAV</nav>

How to disable functionality that takes place after a click event using jQuery

I have a button on my page which, when clicked, listens for another button being clicked and then performs an AJAX call. For example:
$( 'button#a' ).click( function() {
$( 'button#b' ).click( function() {
// Perform an AJAX call here.
});
});
Here is a demo of my code so far:
DEMO
I want to disable the ajax call functionality if a third button button#c is clicked at any time during the time that the page is loaded. I'm at a loss at how this can be done. Hoping someone can suggest an approach.
Should not code click event inside click, but after modifying in your code.
var third_click= false;
$(document).ready(function() {
$( 'button#c' ).click( function() {
third_click = true;
})
$( 'button#a' ).click( function() {
$( 'button#b' ).click( function() {
if( !third_click ) {
// Perform an AJAX call here.
alert( 'ajax call in progress' );
} else {
alert( 'Can\'t call ajax' );
}
});
});
})
here is demo.
What if you used button a to hide button b until a is clicked and then show button b and so fourth until your results are displayed as you with.
example:
$('.btnB').hide();
$('.btnA').on('click', function() {
$('.btnB').toggle();
});
Unless it needs to all display at one time this method wouldn't be able to work in that type of situation
You can just remove the click events from #a and b# when clicking on #c with:
$('#c').click(function () {
$('#a,#b').off('click')
})
jsFiddle example

How to fade in closest image?

I tried writing a small script to Fadein the closest image using jQuery but for some reasons this code is not working. Can anyone help me with the syntax? Thanks
$( ".delimg" ).click(function() {
$(this).closest( "img" ).fadeTo( "slow" , 0.5, function() {
$("input[type='button']").toggle(
function(){
$(this).val("Undelete");
},
function(){
$(this).val("Delete");
}
);
});
});
HTML
<div class="swiper-slide">
<img src="http://20percents.com/backend/uploads/C0d49a7de7b635477125ffffa8df7b931.jpg" class="swipe-image">
<center><input type="button" class="delimg" value="Delete"></center>
</div>
<div class="swiper-slide">
<img src="http://20percents.com/backend/uploads/C0d49a7de7b635477125ffffa8df7b932.jpg" class="swipe-image">
<center><input type="button" class="delimg" value="Delete"></center>
</div>
Fiddle: http://jsfiddle.net/e27r8/597/
The img element is not a direct parent of the button which is clicked. You need to use closest to get the containing div, then search for the image within that. Try this:
$(".delimg").click(function () {
$(this).closest(".swiper-slide").find('img').fadeTo("slow", 0.5);
});
Updated fiddle
Also, note that toggle can no longer be used in the manner you are. It will only show/hide elements now, not run specific functions on successive clicks.
To change the text of the button as required, you can pass a function to val() like this:
$(".delimg").click(function () {
var $button = $(this);
$button.closest(".swiper-slide").find('img').fadeTo("slow", 0.5, function() {
$button.val(function(i, value) {
return value == "Delete" ? "Undelete" : "Delete";
});
});
});
Example fiddle
As img is not parent of input so,you have to do this way:
$(this).closest(".swiper-slide").find("img")
You have to get parent div with class swiper-slide and then get img from inside it.
It's not an ancestor, so you need to traverse -
$(this).closest( ".swiper-slide" ).find("img").fadeTo( "slow" , 0.5, function() {
you should go up one level, and then find
$(...).parent().find(...);
$( ".delimg" ).click(function() {
$(this).parent().find( "img" ).fadeTo( "slow" , 0.5, function() {
$("input[type='button']").toggle(
function(){
$(this).val("Undelete");
},
function(){
$(this).val("Delete");
}
);
});
});
edit
i missed <center> tag
use .parent().parent()

JQuery reversing SlideToggle in Wordpress

I have the following simple code:
jQuery( document ).ready(function( $ ) {
$('.menu ul li:has("ul")').hover(function() {
$('>ul', this).stop().slideToggle();
});
});
I'm using the 'no conflict' way of firing jQuery but for some reason my slide toggle is closing on hover rather than opening! What am I doing wrong? I'm sure its simple but I just can't see it.
An example can be seen here http://ng1club.everythingcreative.co.uk
Use mouseenter and mouseleave instead. Sometimes hover without the second function as a hover out, triggers twice.
$('.menu ul li:has("ul")').mouseenter(function() {
$('>ul', this).stop().slideDown();
}).mouseleave(function() {
$('>ul', this).stop().slideUp();
});
Try this according to documentation you can use hover and apply effect on hover and hover out
jQuery('.menu ul li:has("ul")').hover(
function() {
jQuery('>ul', this).stop().slideDown();
}, function() {
jQuery('>ul', this).stop().slideUp();
}
);
.hover()
Sample Fiddle

how to disable another event when done click event

I have 4 li element and I want when hover (mouseenter,mouseleave) everyone of them change background-color for everyone that choose.
I do it this work with this code :
<script>
$( document ).ready(function()
{
$('#center-group').children().on('mouseenter',function(){
$(this).children('.topmenu').children('.r-part').css('background-color','#810000');
$(this).children('.topmenu').children('.r-part').children('.r-part-bot').css('background-color','#980000');
});
$('#center-group').children().on('mouseleave',function(){
$(this).children('.topmenu').children('.r-part').css('background-color','#404040');
$(this).children('.topmenu').children('.r-part').children('.r-part-bot').css('background-color','#4c4c4c');
});
});
</script>
now I want when select (click event) everyone of li change background-color and don't work top event !!! how do it ??? please guide me....
this correct code:
$(document).on('mouseenter','#center-group li',function(){
$(this).children('.topmenu').children('.r-part').css('background-color','#810000').children('.r-part-bot').css('background-color','#980000');;
});
$(document).on('mouseleave','#center-group li',function(){
$('#center-group').children().not('.selected').children('.topmenu').children('.r-part').css('background-color','#404040').children('.r-part-bot').css('background-color','#4c4c4c');
});
$(document).on('click','#center-group li',function(){
$(this).toggleClass('selected');
$(this).siblings().removeClass('selected');
$('#center-group').children('.selected').children('.topmenu').children('.r-part').css('background-color','#810000').children('.r-part-bot').css('background-color','#980000');
$('#center-group').children().not('.selected').children('.topmenu').children('.r-part').css('background-color','#404040').children('.r-part-bot').css('background-color','#4c4c4c');

Categories

Resources