We Keep Coding

how to delegate mousedown and mouseup on a dynamically created div?

rollmark is created dynamically so I need to delegate events to document
Trying to to perform one action while rollmark is pressed, and another one when the mouse is released but I'm getting a syntax error.
pls help.
$(document).on({'mousedown', '.rollmark' function(e){
console.log('down');
},
mouseup: function(){
console.log('up');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='rollmark'>CLICK</div>

I think you need to call .on separately for each handler if you want event delegation:
$(document)
.on('mousedown', '.rollmark', function(e) {
console.log('down');
})
.on('mouseup', '.rollmark', function() {
console.log('up');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='rollmark'>CLICK</div>

You can do it like this:
$(document).on('mousedown', '.rollmark', function(e) {
console.log('down');
}).on('mouseup', '.rollmark', function(e) {
console.log('up');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='rollmark'>CLICK</div>

have you tried putting comma after '.rollmark'?

Cannot open file dialog box present inside pop up screen using jQuery/JavaScript

I am trying to open the file dialog using jQuery but it's not opening inside the pop-up screen. If I am putting it outside the pop-up div it's working fine. I am providing my code below.
$(document).ready(function(){
$(document).on('click', '.brevent', function(e){
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
e.preventDefault();
console.log('hello');
});
$(document).on('change', '.file', function(){
$(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
});
})
$(document).ready(function() {
$("#addeventdiv").on('click', function(e) {
e.stopPropagation();
});
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("body").on('click', function(e) {
if (e.target.className == "#addeventdiv") {
} else {
$('#addeventdiv').css("display", "none");
}
});
});
Here is my full plunkr code. I have one Add event button. When user will click on this button the form will display and there user has to click on Attachment button which is not working as per expected.

Your delegation fails. Likely because the dialog blocks the document click.
Just add this to any of the loads since the button click does not need to be delegated since it exists in the code at load time
$('.brevent').on("click", function(e){
e.preventDefault();
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
console.log('hello');
});

Your handler for all clicks in #addeventdiv gets the event first and stops propagation. I think https://plnkr.co/edit/FWRAKwlUeIRarY6bZl9n?p=preview will work as you expect:
$(document).ready(function() {
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("#addeventclose").on('click', function(e) {
$('#addeventdiv').css("display", "none");
});
$("body").on('click', function(e) {
if (!$(e.target).parent("#addeventdiv").length) {
$('#addeventdiv').css("display", "none");
}
});
});
Just as a stylistic nitpick, you only need one document ready handler per file

jQuery Drop event not firing

I'm trying to move links (.link) from one div (.folder) to another but the drop event is not firing. I think I made all .link divs droppable areas by preventing default behaviour in dragenter and dragover events. Here's the code:
$(document).ready(function() {
//Logic for create folder button
$("#create-folder-button").click(createFolder);
// //Logic for drag and drop for the links
$(".folder").on("dragstart", function(e) {
console.log("dragstart");
});
$(".folder").on("dragenter dragover", function(e) {
e.preventDefault();
});
$(".folder").on("drop", function(e) {
e.preventDefault();
console.log("drop");
});
});
The "dragstart" prints but the "drop" doesnt.

You need to use event.stopPropagation():
$(".folder").on("drop", function(event) {
event.preventDefault();
event.stopPropagation();
alert("Dropped!");
});

Form onchange event not calling when drop 'n drop

I created a form with the option to either 'drag and drop', or 'click to upload' a file. When either of the 2 happens, I want it to trigger an action.
I used the onchange event to trigger an action when a value in the form changes.
$("#uploadform").on('change', function (e) {
e.preventDefault();
alert("Something Changed");
});
That only gets triggered when I 'click to upload' a file. When I 'drag 'n drop' a file, the event doesn't get triggered.
How can I trigger the same event when I 'click to upload' or 'drag 'n drop' happens?
Please post answers in JQuery.
JSFiddle
$(document).ready(function () {
"use strict";
$("#uploadform").on('change', function (e) {
e.preventDefault();
alert("Something Changed");
});
$('#browseFileDiv').click(function (e) {
$(this).find('input[type="file"]').click();
});
$('#browseFileDiv input').click(function (e) {
e.stopPropagation();
});
// Setup Drag 'n Drop
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
var dropZone = document.getElementById('browseFileDiv');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
});
#browseFileDiv {
height: 100px;
width: 200px;
background-color: greenyellow;
}
#browseFileDiv > input {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
<div id="browseFileDiv">
<input id="openFile" name="img" type="file" />
</div>
</form>

EDIT:
Trying to implement the change and drop listener properly.
$("#uploadform").on('change drop', function (e) {
e.preventDefault();
e.stopPropagation();
alert("Something Changed");
});
// No longer need for `drop` event listener on the `dropZone` element.
// In particular DO NOT stop propagation, otherwise the form will not receive it.
Updated demo: http://jsfiddle.net/jytL8heo/2/
A workaround would be to simply fire the "change" event manually on drop.
function handleFileSelect(evt) {
// Manually fire the change event.
$("#uploadform").trigger("change");
evt.stopPropagation();
evt.preventDefault();
}
Demo: http://jsfiddle.net/jytL8heo/1/

In HTML5 drag&drop only dragstart fires

I use only HTML5 drag&drop. I did it already by JQuery UI using but now need to do it by clear HTML5 API.
Like I just said: only dragstart fires. The rest of the events I don't catch. In dragstart function all seems to work correct: event.dataTransfer gets data, I checked it.
Here is the code:
$('#widget')
.attr('draggable', 'true')
.on('dragstart', function(event) {
event.preventDefault();
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData('text/html', $(this).attr('id'))
event.dataTransfer.setDragImage(event.target, 24, 32);
console.log('Im draggable');
console.log(event.dataTransfer.getData('text/html'));
})
.on('dragend', function(event) {
event.preventDefault();
/*$(this).css('top', event.pageX + "px");
event.dataTransfer.getData('text/html');*/
console.log('dragend');
});
$('#widget_dest')
.click(function(event) {
console.log("click widget_dest");
})
.on('dragenter', function(event) {
event.preventDefault();
console.log("dragenter");
})
.on('dragover', function(event) {
event.preventDefault();
console.log("dragover");
})
.on('drop', function(event) {
event.preventDefault();
event.stopPropagation();
console.log("drop");
var data = event.dataTransfer.getData('text/html');
$(this).append($('#' + data));
$('#' + data).css('top', event.pageX + 'px');
});
});
The only logs I get are: dragstart (correct data) and of the click function.
I purposely inserted click finction to check Widget_dest's properties correctness. Click event fires, the rest of events not.
I'll be very thankful for any help
Victor

You should not be using event.preventDefault() in dragstart. This example works fine: http://jsfiddle.net/noziar/Q3eh3/4/
Also, even if I removed event.preventDefault() in most places, note that in dragover it is necessary, otherwise drop may not fire (at least in Chrome).
As a sidenote, I'm not sure how you're able to read/set properties on event.dataTransfer, since the jQuery event does not have the dataTransfer property - you can use originalEvent for that.
Here is my code:
HTML:
<div id="widget">I'm a widget</div>
<div id="widget_dest">
<span id="widget_box_title">Drag widgets into this box</span>
</div>
CSS:
#widget_dest {
position:absolute;
top: 40px;
border-style:solid;
border-width:1px;
}
#widget {
color:green;
}
#widget_box_title {
color:red;
}
JS:
$('#widget')
.attr('draggable', 'true')
.on('dragstart', function(event) {
var original = event.originalEvent;
original.dataTransfer.effectAllowed = "move";
original.dataTransfer.setData('Text', $(this).attr('id'))
original.dataTransfer.setDragImage(event.target, 24, 32);
console.log('Im draggable');
console.log(original.dataTransfer.getData('Text'));
})
.on('dragend', function(event) {
$(this).css('top', event.pageX + "px");
event.originalEvent.dataTransfer.getData('Text');
console.log('dragend');
});
$('#widget_dest')
.click(function(event) {
console.log("click widget_dest");
})
.on('dragenter', function(event) {
console.log("dragenter");
})
.on('dragover', function(event) {
event.preventDefault();
console.log("dragover");
})
.on('drop', function(event) {
console.log("drop");
var data = event.originalEvent.dataTransfer.getData('Text');
$(this).append($('#' + data));
});