We Keep Coding

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

JQuery Tooltip Not Allowing Button to be Clicked

I'm using JQuery tooltip plugin and I'm trying to simulate a input button on hover, which it does successfully but I cannot click on said button. It's like it never exists in the DOM, or maybe it does but then is instantly removed. I'm not sure why the click is not binding.
http://jsfiddle.net/BgDxs/126/
$("[title]").bind("mouseleave", function (event) {
var evt = event ? event : window.event;
var target = $(evt.srcElement || evt.target);
evt.stopImmediatePropagation();
var fixed = setTimeout(
function () {
target.tooltip("close");
}, 200);
$(".ui-tooltip").hover(
function () { clearTimeout(fixed); },
function () { target.tooltip("close"); }
);
});
$("[title]").tooltip({
content: "...wait...",
position: { my: "left top", at: "right center" },
open: function (event, ui) {
var _elem = ui.tooltip;
window.setTimeout(
function() {
var html = "<input type='button' value='Card Information' class='card_info_popup'></input>";
_elem.find(".ui-tooltip-content").html(html);
},
200);
},
track: false,
show: 100
});
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});

You're using event delegation wrongly here since .container is not the child of your input with class card_info_popup, so you need to use:
$('body').on('click', '.card_info_popup', function() {
alert('click');
});
instead of:
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
Updated Fiddle

change:
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
to
$(document).on('click', '.card_info_popup', function() {
alert('click');
});
Updated Fiddle

Try this.
You have to use event delegation to enable the click event on the newly created tooltip button
http://learn.jquery.com/events/event-delegation/
$(document).on('click', '.card_info_popup', function() {
alert('click');
});

You have to delegate on('click'); to a static element then bind it to the dynamically generated popup.
I have updated your fiddle: http://jsfiddle.net/BgDxs/130/
Here is the updated code:
$('body').on('click', '.ui-tooltip input.card_info_popup', function() {
alert('click');
});

Jquery events does not work

I'am trying to change the class of some input elements during some mouse events but only mouseover and mouseout events are working, what can be the reason of this problem ?
$(document).ready(function(){
$('.registerFormElements').mouseover(function(){
this.className='bright';
});
$('.registerFormElements').mouseout(function(){
this.className='';
});
$('.registerFormElements').focus(function(){
this.className='bright';
});
$('.registerFormElements').blur(function(){
this.className='';
});
});

Try to use the code :
$(this).attr('class', '');
or
$(this).attr('class', 'myClass');
and you can too
$(this).addClass('myClass');
$(this).removeClass('myClass');

$(document).ready(function(){
var classname= 'bright';
/*Can create a variable so that you can use it later. By creating variable we can avoid searching in entire dom again*/
var formElement = $(".registerFormElements");
/*Used chaining*/
formElement.on( "mouseover focus", function() {
$(this).addClass(classname);
})
.on( "mouseout blur", function() {
$(this).removeClass(classname);
});
});

You can use addClass() and removeClass()
$(this).removeClass(); //It clears all classes
$(this).addClass('MyClass');

you could bind many events and look at the event.type and toggle the class you want:
$(document).ready(function(){
$('.registerFormElements').on('focus mouseenter mouseleave blur', function(e) {
var element = $(this);
var shouldHaveBright = e.type === 'focus' || e.type === 'mouseenter';
var hasFocus = element.is(':focus');
element.toggleClass('bright', shouldHaveBright || hasFocus);
});
});

It seems to be working for me. Check your class names don't have typos in them. Also, by focus do you mean tab to the input? This is what triggers focus events.
See my fiddle:
http://jsfiddle.net/AdqzA/
$('.registerFormElements').mouseover(function(){
this.className='bright';
});
$('.registerFormElements').mouseout(function(){
this.className='';
});
$('.registerFormElements').focus(function(){
this.className='bright';
});
$('.registerFormElements').blur(function(){
this.className='';
});

Your Jqueries might be conflicting :-
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.registerFormElements').mouseover(function(){
this.className='bright';
});
$j('.registerFormElements').mouseout(function(){
this.className='';
});
$j('.registerFormElements').focus(function(){
this.className='bright';
});
$j('.registerFormElements').blur(function(){
this.className='';
});
});

How to convert hover function with on in jquery

I have this code
$("td").hover(function(){
$(this).find('a.btn').show();
}, function(){
$(this).find('a.btn').hide();
})
How can i convert this function for new dom elements with on

$("#mytable").on('hover', 'td', function(){
$(this).find('a.btn').show();
}, function(){
$(this).find('a.btn').hide();
});
But using the 'hover' pseudo event as a substitute for passing 'mouseenter mouseleave' is deprecated, so you should really use mouseenter and mouseleave directly.
$("#mytable").on('mouseenter', 'td', function(){
$(this).find('a.btn').show();
})
.on('mouseleave', 'td', function(){
$(this).find('a.btn').hide();
});
Or like this:
$("#mytable").on({'mouseenter': function(){
$(this).find('a.btn').show();
}, 'mouseleave': function(){
$(this).find('a.btn').hide();
}}, 'td');
Or shorter like this:
$("#mytable").on('mouseenter mouseleave', 'td', function(e){
$(this).find('a.btn').toggle(e.type === 'mouseenter');
});

I would do it like this:
$('td').on({
mouseenter: function() { $(this).find('a.btn').show() }
mouseleave: function() { $(this).find('a.btn').hide() }
})
Edit: It's not clear by your question if you need delegation in that case check out the other answer.

How to use click events in CKEditor..?

I am writing an small code to run on CKEditor document click event, but its not working. My code is,
var element = CKEDITOR.document.getById( 'Editor_TextArea' );
element.on( 'click', function( ev )
{
//mycode
alert('ok');
}
);
Can anyone help me..

That CKEDITOR.document.getById( 'Editor_TextArea' ); is not giving any values for me..
So i used the below code and its works well.
CKEDITOR.instances['Editor_TextArea'].on('contentDom', function() {
this.document.on('click', function(event){
//your code
alert('Click Event');
});
});

This will work emailTemplateBody is name of textarea field.
var editor = CKEDITOR.instances.emailTemplateBody
editor.on('contentDom', function () {
var editable = editor.editable();
editable.attachListener(editable, 'click', function () {
console.log("click event");
});
});

editor.editable().on('click', function (event) {
//YOUR CODE GOES HERE
});