Detect button click inside jQuery mobile collapsible - javascript

I'm using jQuery mobile and I was trying to add a button inside a collapsible but the problem is that when i click on the button the click event is not fired but instead the block gets uncollapsed or collapsed.
I tried the code below but it didn't work
$(document).on('pagebeforeshow', '#page', function () {
$('#header').on('click', '#start', function (e) {
alert("click");
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
});
<div data-role='collapsible' data-theme='c' data-content-theme='d' data-collapsed icon='arrow-d' data-expanded-icon='arrow-u' data-iconpos='right'>
<h4 id='header'>
<input type='button' data-theme='c' value='Demarrer' data-mini='true' data-inline='true' data-icon='mappin' data-icon-pos='top' id='start'/>
</h4>"
</div>

that's because your button exists inside the collapsible section. What you can do is prevent the section from collapsing when the button is clicked i.e get the id of the target clicked and if it's the id="start" then e.preventDefault(); so something like this:
$('#header').on('click', function (e) {
var id = e.target.id;
if(id=="start"){
alert("click");
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
}
});

Related

Attaching events to dynamic elements in wordpress - jquery

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');
});

How to remove focus from button after closing javascript confirm box

I have a button with a bootstrap element on it.
<button title="delete" type="button" class="btn btn-default btn-sr" data-confirm="Are you sure to delete this item?"><span class="glyphicon glyphicon-trash white"></span></button></a>';
It has a css property which I color it red.
When user clicks the delete button, a JavaScript confirmation will come out.
The problem is whenever i click cancel, the button will be focused. How do I remove the focused button?
Here is the jQuery code:
<script>
$(document).on('click', ':not(form)[data-confirm]', function(e) {
if( !confirm($(this).data('confirm')) ) {
e.stopImmediatePropagation();
e.preventDefault();
}
});
</script>
Maybe could you try to blur() the button?
<script>
$(document).on('click', ':not(form)[data-confirm]', function(e) {
if( !confirm($(this).data('confirm')) ) {
e.stopImmediatePropagation();
e.preventDefault();
$(this).blur(); // to make the focus disappear
}
});
</script>
$(this).blur();
removes the focus
$(this).blur();
over
document.activeElement.blur()

jQuery hide dropdown menu

I have a dropdown menu that shows with the following jQuery script:
jQuery(document).ready(function($) {
$('#block-mln-main-menu li').click(function(){
$(this).find('.test').toggle();
});
});
What I want to achieve is when the user clicks anywhere else on the page, it slides up or hides. I am literally at a loss on how to achieve this.
Any help is greatly appreciated.
added a fiddle : http://jsfiddle.net/aL7Xe/999/
Yoy can try stop propagation event.
CSS:
.showup{width:100px;height:100px; background:red; display:none;}
.click{cursor:pointer;}
HTML
<div class="click">click me</div>
<div class="showup">Click somewhere else!</div>
JQUERY
$(document).ready(function(){
$('.click').click(function(event){
event.stopPropagation();
$(".showup").slideToggle("fast");
});
$(".showup").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".showup").hide();
});
Toggle will only work it user click on the same object it you want to hide it when click elsewhere try
jQuery(document).ready(function($) {
$(this).not('#block-mln-main-menu li').click(function(){
$(this).find('.test').hide();
});
});
What I understand is that you want to show dropdown menu when an user clicks on it. If the user again clicks on it or anywhere on the page it should close.
CSS
.hide {
display: none;
}
JS
$('.menu-label').on('click', function() {
$('.drop-down-menu').toggleClass('hide');
});
To hide the menu when user click anywhere on page
$('body').on('click', function() {
$('.drop-down-menu').addClass('hide');
});

Close popup div when clicked outside it

I have a button on which when i click, a form opens to be filled by the user. When i click the button again the form closes. This wasn't possible as with one button i wasn't able to perform 2 functions like opening and closing of the form with one button. So, i took 2 buttons. When one button is clicked, it hides and the second button shows and the form is opened and when the second button is clicked, the same button hides and the first button shows and the form closes. I have no problem in this.
Now, I also want that when user clicks anywhere outside the div form, the form should close itself. Help me do this. These are the 2 buttons.
<input type="button" value="Add New" id="NewRow" class="btn1 green" onclick="ToggleDisplay()" />
<input type="button" value="Add New" id="NewRowCopy" style="display: none;" class="btn green" />
This is the form.
<div id="div_fieldWorkers" style="display:none;" class="formsizeCopy">
This is the script.
$(document).ready(function () {
$('#div_fieldWorkers').hide();
$('input#NewRowCopy').hide(); });
$('input#NewRow').click(function () {
$('input#NewRowCopy').show();
$('input#NewRow').hide();
$('#div_fieldWorkers').slideDown("fast");
});
$('input#NewRowCopy').click(function () {
$('input#NewRow').show();
$('input#NewRowCopy').hide();
$('#div_fieldWorkers').slideUp("fast");
});
$("html").click(function (e) {
if (e.target.parentElement.parentElement.parentElement == document.getElementById("div_fieldWorkers") || e.target == document.getElementById("NewRow")) {
}
else
{
$("#input#NewRowCopy").hide();
$("#input#NewRow").show();
$("#div_fieldWorkers").slideUp("fast");
}
I an trying to hide the second button when clicked outside the form.. but not working..
Try
$(document).ready(function () {
$('#div_fieldWorkers').hide();
$('input#NewRowCopy').hide();
$('#NewRow').click(function (e) {
$('#NewRowCopy').show();
$('#NewRow').hide();
$('#div_fieldWorkers').stop(true, true).slideDown("fast");
e.stopPropagation();
});
$('#NewRowCopy').click(function (e) {
$('#NewRow').show();
$('#NewRowCopy').hide();
$('#div_fieldWorkers').stop(true, true).slideUp("fast");
e.stopPropagation();
});
$(document).click(function (e) {
var $target = $(e.target);
if ($target.closest('#div_fieldWorkers').length == 0) {
$("#NewRowCopy").hide();
$("#NewRow").show();
$("#div_fieldWorkers").stop(true, true).slideUp("fast");
}
})
});
Demo: Fiddle

hide and show image on button click

I have two image and two button in a div, Now process is when i click on button 1 then image 1 show same as in button 2.. now my problem is i want both image hide when i click in any part of body.. Now my problem is when i click on body it will hide but not able to show images on button click.
Fiddle Here
HTML
<input type='button' id='btn1' value='button1'>
<img src="abc.jpg" id='img1'>
<input type='button' value='button2' id='btn2'>
<img src="abc.jpg" id='img2' >
Js
$('#btn1').click()(function(){
$('#img1').show();
$('#img2').hide();
});
$('#btn2').click()(function(){
$('#img2').show();
$('#img1').hide();
});
$('body').click()(function(){
$('#img1').hide();
$('#img1').hide();
});
Try:
$('#btn1').click(function (e) {
e.stopPropagation();
$('#img1').show();
$('#img2').hide();
});
$('#btn2').click(function (e) {
e.stopPropagation();
$('#img2').show();
$('#img1').hide();
});
$('body').click(function () {
$('#img1,#img2').hide();
});
jsFiddle example
You were using the click function incorrectly, plus your click events on the buttons were also bubbling up the DOM to the event you placed on the body.
try this
$('body').click(function(e) {
var target = $(e.target);
if(!target.is('#btn1') || !target.is('#btn2')) {
$('#img1').hide();
$('#img1').hide();
}
});

Categories

Resources