We Keep Coding

Link click issue with flickity JS plugin

I want to know when the user starts the navigation to a new page by clicking in a link located inside my Flickity slider. I have attached the jQuery click event on the links, but when the user slides and click at the same time, the click event on the <a> is triggered but the navigation to the link adress does not occur.
Demo : http://codepen.io/anon/pen/GoapaY
. To reproduce the issue : click down on the link, then slide, then release your click : the event is triggered but the navigation to example.com have not occured.
Which event/trick can I use to know when the user actually navigate to the link adress ?

Answer obtained with this issue opened on Flickity's GitHub :
This is the intended behavior. This allows users to slide the gallery using any element on the page, links, buttons, etc. It lets click events propagate. There's additional logic so that static clicks do trigger a click on the element, and allow links to go through if no sliding occurred.
Flickity's staticClick event might be what you're looking for.

This solves the issue for me:
$el.on('dragStart.flickity', () => $el.find('.slide').css('pointer-events', 'none'));
$el.on('dragEnd.flickity', () => $el.find('.slide').css('pointer-events', 'all'));
I just disable pointer events on dragStart and reinstate them on dragEnd.

Ali Klein's solution worked for me.
I'm not using jQuery so here is the code I'm using
const carousel = document.querySelector('.carousel')
const flkty = new Flickity(carousel, {
// ...options
on: {
'dragStart': () => {
carousel.style.pointerEvents = 'none'
},
'dragEnd': () => {
carousel.style.pointerEvents = 'all'
}
}
})

JQuery Modal Trigger for Unique Elements

Let's say I have a collection containing 3 elements.
Each element has a corresponding remove button that I would like to initiate a POST to my server. Right now I have it setup so that when "Remove" button is pressed, a confirmation modal pops up with "yes" and "no" buttons. I am using the same modal for each element.
Problem is, when I click "yes" in modal, how can I have it know which remove button I clicked that launched the modal?
Here is a link to a gist containing the problematic code
https://gist.github.com/anonymous/85481507a1171467cae5
I have tried using a suggestion below that implements the following:
$('#hingle_dingle_0').on('click', function(e){
$('#confirmRemoveNetwork').modal('toggle', $(this));
});
$('#confirmRemoveNetwork').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
console.log(button);
});
However this returns an empty set. I can't for goodness sake figure out why it doesn't find the event.
Thanks for any help!

The modal is autoposting because you are opening it with a <button> inside a form with an input. Unless you tell it not to, this will cause a form submit. Simply set the type to button (instead of submit which is default): <button type="button">
You can capture the calling button by tapping into the event thrown when the modal is opened:
$('#confirmRemoveNetwork').on('shown.bs.modal', function (e) {
console.log(e.relatedTarget.id);
});
Finally, be sure your IDs are unique. You cannot have both "remove network" buttons using the same id of removenetworkbtn.

is there anyway to fully prevent popstate?

Im working with jquery mobile right now. And when the user clicks on the box, it will show an additional one. But when the user forced return on browser (or the backbutton), on that moment, the second box should hide, instead of going back the the prev page.
I've managed to achiev almost what I wanted with the popstate:
window.onpopstate = function(event) {
if($('div').is(':visible') {
closeFunction();
event.stopImmediatePropagation();
}
}
But it still changes the URL.
For example, if i has a nav like this:
index > home > internal(with box)
And then i pressed the back button
index > home
Will still trigger the url change, but not the page change.
I've tried with pagebeforechange, but with the same result.
Any ideas?

the popstate event is not cancellable.
referred doc
Specification: HTML5
Interface: PopStateEvent
Bubbles: Yes
Cancelable: No
Target: defaultView
Default Action: None

Disable div with click event

I want to disable my div with image and click event that event does not call. I try do it with KO:
<div title="Delete Series" class="deleteSeriesButton" data-bind="css: { disabled: true}" ></div>
but this does not work with div.
Can I do it without unbind click event?

If you are using KnockoutJS, then you have a view model.
And if you have a view model, you should be able to add an observable property that tells you whether the "delete series" button is enabled or disabled.
self.isDeleteEnabled = ko.computed(function() {
// your code that tells whether the button is enabled or not
});
And let's say you in your view model the click action, like this:
self.clickAction = function() {
// do what you want to do
}
Thne, you can make your "click" binding dependent on this observable, like this:
<div class="button" data-bind="click: isDeleteEnabled() ? clickAction : null">
If the isDeleteEnabled observable returns true, then the button is clickable, otherwise it's not.
I made a fiddle so you can see how it's done in a real example.

you can block the div using the jQuery blockUI plugin.
link to blockUI

click event fires twice for button inside link

I'm using bootstrap to create the stacked pills nav control. Each entry in the control is a link, and that link element also contains a button. The button may be clicked to delete the list entry, or the list entry itself may be clicked to perform some action on it.
The html for each list entry looks like this:
<li>
<a href="#" id="launch_me">Some title
<button class="my-class" id="remove_me">
<i class="icon-remove"></i>
</button>
</a>
</li>
These items are added dynamically based on a response from a server. The jquery then adds the click handler via:
$("#launch_me").click((function (info) {
return function () {
launch(info);
};
})(myInfo));
$("#remove_me").click((function (info) {
return function () {
remove(info);
};
})(myInfo));
When I click on the button to delete the entry, the 'remove' click routine is triggered, followed by the launch routine.
How can I make it so clicking the remove button only results in the remove click handler being run?
Thanks!

Try this:
$("#remove_me").click((function (info) {
return function (e) {
e.stopPropagation();
remove(info);
};
})(myInfo));
http://api.jquery.com/event.stopPropagation/
This will prevent the click event of the "Remove Me" button from bubbling up to its parent "Launch Me" container and executing its click handler.
Your before: http://jsfiddle.net/HVExt/
Mine after: http://jsfiddle.net/HVExt/1/

MyInfo looks dodgy to me. I wiuld skip that and add ; instead. But then i don't know the rest of your code...