We Keep Coding

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

Toggling one element disables the others

So I have this code http://jsfiddle.net/GqS7W/
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$('.cat'+$(this).attr('data-prod-cat')).toggle();
}); });
And I applied it to my table, but I need that when one button is pressed the others hide, like a menu, how can I do that?

This should work
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$('tr[class^=cat]').hide();
$('.cat'+$(this).attr('data-prod-cat')).show();
});
});

quite simple i have updated http://jsfiddle.net/GqS7W/832/
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$('.cat'+$(this).attr('data-prod-cat')).siblings('.item').slideUp();
$('.cat'+$(this).attr('data-prod-cat')).slideDown();
});
});

Try this
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$(".toggler").parent().parent().toggle();
$(this).parent().parent().show();
$('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});

Click not working, only touchstart mousedown

How do I bind 'click' to a paragraph?
I have the following function:
$(document).on('touchstart mousedown',"p span.text", function(e) {
console.log('I was clicked');
*more code here*
});
If I replace 'touchstart mousedown' with 'click', the function is no longer fired.
PS: I'm SUPER new to JS, so I might be doing something wrong.

Try:
$("p span.text").on('click', function(){
console.log('I was clicked');
});

How do I bind 'click' to a paragraph
Try to attach click event to your paragraph instead of span:
$(document).on('touchstart mousedown click',"p", function(e) {
console.log('I was clicked');
});

This also works:
According to your reply, updated
$(document).on('click',"p span", function(e) {
console.log('I was clicked');
});

how to cancel some click events in document in JQuery (not all of them)

Click on the document, the .area div disappears.
$(document).on('click', function() {
$('.area').hide();
});
$(document).off('click', '.red', function(e) {
e.stopPropagation();
});
In this case, how can I apply stopPropagation to .red. I'd like to keep this js format, as I will need to add more class names.
Online Sample http://jsfiddle.net/ku9cj/1/
Thanks

off() is used to remove the event handler; you need to use .on()
$(document).on('click', '.red', function(e) {
e.stopPropagation();
});
Demo: Fiddle

You should not attach handlers to the document, as they bubble up very slowly. If you must do so, try the following:
$('body').on('click', function() {
$('.area').hide();
});
$('.red').on('click', function(e) {
e.stopPropagation();
});
Or, if you insist on using a delegate and do not have a closer parent element:
$('body').on('click', '.red', function(e) {
e.stopPropagation();
});

Swipe, swipeleft, swiperight events do not trigger on image

I want use jQuery mobile's swiperight event in combination with an image, which doesn't seem to function.
HTML:
<div id="one"><img src="http://jquerymobile.com/wp-content/uploads/2012/09/jquery-mobile-logo-03.png"/></div>
<div id="two">works</div>
JS:
$("#one").on("swiperight", function() {
alert("does not work");
});
$("#two").on("swiperight", function() {
alert("works");
});
JSFiddle

I'm quite sure only desktop browser have this issue as mobile browsers usually don't drag images on swipe.
The solution suggested here prevents dragging your image in all browsers:
$('img').on('dragstart', function(event) {
event.preventDefault();
});
So here is your new working fiddle: http://jsfiddle.net/4CbEQ/1/

You need to prevent image dragging, here's a working example: http://jsfiddle.net/Gajotres/SgUZK/
$(document).on('pagebeforeshow', '#index', function(){
$('img').on('dragstart', function(event) { event.preventDefault(); });
$("#one").on("swiperight", function() {
alert("does not work");
});
$("#two").on("swiperight", function() {
alert("works");
});
});