We Keep Coding

Drag and Drop (Dragger event) prevents onclick

we have used one jquery library called as jesse which works fine
The thing is we have an li attributes and inside it we have used onclick event .. but somehow it stops working and we are unable to call onclick event .. Here is the fiddle for better understanding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Simple-jQuery-Plugin-For-Drag-Drop-Sorting-Of-Lists-jesse/jquery-jesse.js"></script>
<script type="text/javascript">
$(function(){
// removing image onclick close button
$("#list").on("click", ".close_product", function (event) {
console.log('inside onclick function');
});
$('#list').jesse({
onStop: function(position, prevPosition, item) {
console.log('inside list function');
if(position == 0){
item.addClass("drop-high").removeClass("drop-small");;
$( "#list" ).find( "li:nth-child(2)" ).removeClass("drop-high").addClass("drop-small");
}
if(prevPosition == 0){
item.addClass("drop-small").removeClass("drop-high");
$( "#list" ).find( "li:nth-child(1)" ).removeClass("drop-small").addClass("drop-high");
}
},
});
});
</script>
<ul class="jq-jesse" id="list">
<li class="drop-high"><div class="high"><div class="close close_product">X</div><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/04/1459870313PHP-logo.svg.png" width="20%"></div> </li>
<li class="drop-small"><div class="high"><div class="close close_product">X</div><img src="https://phpwomen.org/holdingpage/images/usergroups/phpne.png" width="20%"></div> </li>
<li class="drop-small"><div class="high"><div class="close close_product">X</div><img src="http://d3gnp09177mxuh.cloudfront.net/tech-page-images/php.png" width="20%"></div></li>
<li class="drop-small"><div class="high"><div class="close close_product">X</div><img src="http://unitedwebsoft.in/blog/wp-content/uploads/2013/07/advantage-of-php.jpg" width="20%"></div></li>
</ul>
As you can see above, i have onclick function, but its not working. How can i make it work ?

The library doesn't use drag events. It listens to mousedown and if fired it stops default execution with e.preventDefault(); and watches over $(document).on('mousemove') and .on('mouseup').
Therefore closing div can't hear any click event. You can slightly modify the library file to make it identify closing clicks.
Add specific setting, say, closingClass to the class (line 7)
var settings = $.extend({
closingClass: 'closing',
selector: 'li',
dragClass: '_isDragged',
placeholder: '<li class="jq-jesse__placeholder"></li>'
}, options);
Change listening of clicks at closing divs by adding the following 3 lines:
list.on('mousedown', settings.selector, function(e){
if($(e.target).hasClass(settings.closingClass)) {
return true;
}
That's it. Now you can't drag using a div having closingClass. You can add their own listeners.
Fiddle with fixed library code.

jQuery Adding / Removing classes on a button to hide elements

Trying to get a mobile footer menu (#mobile-menu) to hide / show when the floating button is clicked or tapped. I'm able to add the click event handler to the button (#mobile-footer-btn) which in turns applies a class to the menu and animates it off screen.
<footer id="mobile-footer">
<div id="mobile-menu">
<div id="mobile-footer-container">
<div class="mobile-link">
My Account
</div>
<div class="mobile-link">
Reviews
</div>
<div class="mobile-link">
Contact Us
</div>
</div>
</div>
<div id="mobile-footer-close">
<button id="mobile-footer-btn">
<div class="mobile-btn-close">
<span></span>
</div>
</button>
</div>
</footer>
For whatever reason, I'm not able to remove that class and add a new class to the same ID, which would add a class to show the menu again.
jQuery(document).ready(function($){
// Store menu container
var mobileMenu = '#mobile-menu';
// Store Trigger
var mobileBtn = '#mobile-footer-btn';
//Trigger closing the footer menu
$(mobileBtn).on("click", function() {
$(mobileMenu).addClass('mobile-menu-hide');
});
$('.mobile-btn-close').click(function() {
$(this).addClass('is-rotating');
});
if($(mobileMenu).hasClass('mobile-menu-hide')) {
$(mobileBtn).on("click", function(e) {
e.stopPropagation();
$(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show");
});
}
});
Any help would be much appreciated!

You only need one on click event! Your if condition never gets evaluated to true, therefor your onclick event is never triggered. It's better to house it in one onclick event. Here's the code:
jQuery(document).ready(function($){
// Store menu container
var mobileMenu = '#mobile-menu';
// Store Trigger
var mobileBtn = '#mobile-footer-btn';
$('.mobile-btn-close').click(function() {
$(this).addClass('is-rotating');
});
$(mobileBtn).on("click", function(e) {
e.stopPropagation();
if($(mobileMenu).hasClass('mobile-menu-hide')) {
$(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show");
} else {
$(mobileMenu).removeClass("mobile-menu-show").addClass("mobile-menu-hide");
}
});
});
Here's the plunker: https://plnkr.co/edit/SG8eFns91wV4adxapFDB
Even better now that I think about it: just toggle the one class that hides the menu and just use jQuery's toggleClass function. Something like this:
$(mobileBtn).on("click", function(e) {
e.stopPropagation();
$(mobileMenu).toggleClass('mobile-menu-hide');
});

The problem is that your if condition in the block only executes once. However, you need it to be called on every click. Hence, you need to update your code to following
jQuery(document).ready(function($){
// Store menu container
var mobileMenu = '#mobile-menu';
// Store Trigger
var mobileBtn = '#mobile-footer-btn';
//Trigger closing the footer menu
$(mobileBtn).on("click", function() {
// moved your if block inside the click handler
if($(mobileMenu).hasClass('mobile-menu-hide')) {
e.stopPropagation();
$(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show");
} else {
$(mobileMenu).addClass('mobile-menu-hide');
}
});
$('.mobile-btn-close').click(function() {
$(this).addClass('is-rotating');
});
});

Your $(mobileBtn).on("click", function(e) { ... code never executes and, therefore, never adds the click event handler because the menu doesn't start out as .mobile-menu-hide Try this
$(mobileBtn).on("click", function(e) {
if($(mobileMenu).hasClass('mobile-menu-hide')) {
e.stopPropagation();
$(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show");
}
});

Styled Select Fields with jquery and HTML Listelements

i have a little problem with my styled Selectfield. I used for this unordered list elemnts (UL / LI) and a H3.
The problem is to close the "Selectfield" by clicking anywhere on the page.
When i bind a click event to the "document", then don't open the SelectField with the current jQuery code.
I have hidden the UL Element by using CSS (display:none).
To open the Select Fields is not the problem. But only without the $(document).bind('click') [...] code.
I hope anyone have a resolution for my.
Thanks.
And here my HTML Code:
<div class="select_container">
<h3 class="reset">Select Items</h3>
<ul class="select_elements">
<li>Select Item 01</li>
<li>Select Item 02</li>
<li>Select Item 03</li>
</ul>
</div>
And here the jQuery Code:
$(document).ready(function(){
var selectFields = {
init: function(){
$('.select_container').on('click',function(){
$(this).find('ul.select_elements').toggle();
$(this).find('ul.select_elements').toggleClass('active');
});
$(document).bind('click',function(){
if( $('.select_elements').is(':visible')){
$('.select_elements.active').hide();
}
else if( $('.select_elements').is(':hidden')){
console.log('visible false ...');
}
});
}
};
$(selectFields.init);
});

You need to use .stopPropagation in $('.select_container').on('click') function to prevent triggiring $(document).on('click')
You need to use toggleClass in $(document).on('click') too
$('.select_container').on('click',function(e){
$(this).find('ul.select_elements').toggle();
$(this).find('ul.select_elements').toggleClass('active');
e.stopPropagation();
});
$(document).on('click',function(){
if( $('.select_elements').is(':visible')){
$('.active').hide();
$('.select_elements').toggleClass('active');
}
else {
console.log('visible false ...');
}
});
FIDDLE

In jquery and javascript an event bubbles up so you have to use e.stopPropagation() on your container click.
check theese pages linki1 or link2 and a possible solution to your problem could be
<script type="text/javascript">
$(document).ready(function(){
var selectFields = {
init: function(){
$(document).bind('click',function(e){
if( !$('ul').hasClass('active')){
$('ul').hide()
$(this).find('ul.select_elements').toggleClass('active');
}
});
$('.select_container').on('click',function(e){
e.stopPropagation()
if( $('ul').hasClass('active')){
$('ul').show()
}else{ $('ul').hide() }
$(this).find('ul.select_elements').toggleClass('active');
});
}
};
$(selectFields.init);
})
</script>
With stopPropagation prevent the event from bubbling and being caught by the document when you click on the list
in some cases you can also use stopImmediatePropagation, for understand differences between stopPropagation and stopImmediatePropagation check this post Post
The only drawback to similar code and to and Batu Zet code, is that If you want the items in the list can be clicked without disappearing, you have to add another stopPropagation on ul tag
Tis is the final Fiddle

Remove Div on link click

I am doing a code in which I want to delete a div when its inner link("Delete") is clicked. I know this question might be repeating and I have tried so many methods but not working. I dont know what's the problem.
Here is my HTML Rendering Code:
<div id="ViewRows">
<br>
<div class="ViewRow"> NOS: FA Comment: finance
<a class="deleteViewRow" href="#">Delete</a>
<br>
</div>
<div class="ViewRow">
NOS: TPA Comment: Assistance
<a class="deleteViewRow" href="#">Delete</a>
<br>
</div>
</div>
Here is my javascript Code for removal of that div.
$("a.deleteViewRow").live("click", function () {
$(this).parents("div.ViewRow:first").remove();
return false;
});
I also tried following javascript:
$("#ViewRows").on("click", "a.deleteViewRow", function () {
$(this).closest("div.ViewRow").andSelf().remove();
return false;
});
I have tried same code on another page. It is working but when I applied the same logic in another page. It's not working. I know you all are right but I dont know whats problem. In firebug it's not even going into the function.

This should work:
$("#ViewRows").on("click", "a.deleteViewRow", function (e) {
// prevent browser from following link
e.preventDefault();
// ".andSelf()" can be skipped - once the parent div is removed, the link gets removed as well
$(this).closest("div.ViewRow").remove();
});

this simple yet efficient code works fine: http://jsfiddle.net/L2CsH/
$("#ViewRows").on("click", "a.deleteViewRow", function () {
$(this).parent().remove();
});

you need to prevent default action of link. event.preventDefault()
$("#ViewRows").on("click", "a.deleteViewRow", function (e) {
e.preventDefault();
$(this).closest("div.ViewRow").remove(); //.andSelf() is not needed here.
//return false;
});
Demo : Remove Div JSFiddle

jQuery making selection

I have a nested div like this
<div id="one">
<div id="two">
id two goes here
</div>
<div id="three">
id three goes here
</div>
<div id="four">
id four goes here
</div>
</div>
Now i want to handle click and doubleclick events on all divs except in div#four,
like this
$('#one').live('dblclick', function() {
my javascript code goes here
});
('#one').live('click', function() {
my javascript code goes here
});
How can i use the above script and exclude the last nested div #four.
Thanks

Like this:
$('#one, #one > div').not('#four').delegate('dblclick, click', function(){
// my javascript code goes here
});

EDIT: Based on further clarification, try this:
$('#one').bind('click dblclick', function( event ) {
var id = event.target.id;
if(id == "one" || id == "two" || id == "three") {
if(event.type == "click") {
// code for click event
} else {
// code for double click event
}
}
});​
EDIT: Based on our conversation under another answer, it seems like you want the #one element to be clickable, but none of its child elements. If that is right, try this:
$('#one').click(function() {
// code to run when `one` is clicked.
}).children().click(function( event ) {
event.stopPropagation();
});
Now if there's any text in #one, the code for that element will fire, but it will not fire when you click any children of #one.
Let me know if that was what you wanted.
EDIT:
If you are saying that you will have a dynamic number of elements inside #one, and the last one will not get the event, then do this:
$('#one').delegate('div:not(:last-child)', 'click dblclick', function( event ) {
if(event.type == 'click') {
// do something for the click event
} else {
// do something for the double click event
}
});​
Note that this assumes there will not be nested divs. Results may be unexpected if there are. Also, the #one element doesn't fire events. Only its children.
Original answer:
$('#one,#two,#three').bind('click', function(){
// code for click event
})
.bind('dblclick', function() {
// code for double click event
});
Or replace .bind with .live if you really need it.

I would use an additional class:
HTML:
<div id="one">
<div id="two" class="clickable">
id two goes here
</div>
<div id="three" class="clickable">
id three goes here
</div>
<div id="four">
id four goes here
</div>
</div>
JS:
('.clickable').live('click', function() {
});

Use not method, more on this here: How can I exclude these elements from a jQuery selection?

You must use $('#one') instead $('.one') aren't you?

$("div:not(#four)")
or
$("#one :not(#four)")
Will select any div that does not have the id="four" set. Basically the :not is what you are looking for. Anything in the :not parenthesis is negated for selection purposes.
http://api.jquery.com/not-selector/
An alternative is to attach a single click/double click handler to the parent which means no need for .live or anything, and in the handler ensure that you are receiving a click from an acceptable child with $(event.target).is(":not(#id)")
$("#one").click(function(event) {
if (this != event.target && $(event.target).is(':not(#four)')) {
// do work on event.target
}
});
// ...