I am using CKEditor 4.4.3 and trying to listen to an editor's click event:
editor.on('click', function (e) {
console.log('click event from attaching to the editor');
});
For some reason, the click event never fires. However, if I listen to the doubleclick event, it fires when the editor is double clicked.
I was previously listening to the click event on editor.editable, but it doesn't appear to work for editors that are not inlined. Why is the click event not working?
Some further investigations:
Attaching the event handler on editor.document fires for every click, including clicks outside the editor.
Attaching the event handler to editor.container fires for clicks on the container including the toolbars.
Fiddle: http://jsfiddle.net/295PE/
Correct way of attaching listeners to the editable element in CKEditor:
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable, 'click', function() {
// ...
} );
} );
Read more about the reasons why contentDom event has to be used instead of e.g. instanceReady in editable.attachListener documentation.
Use attach the event handler to the editor's editable. This needs to be done after the editor is ready:
editor.on('instanceReady', function (e) {
editor.editable().on('click', function (event) {
console.log('clicked');
});
});
Fiddle: http://jsfiddle.net/8fZpz/
Related
When click on datepicker (http://www.eyecon.ro/bootstrap-datepicker/), his SHOW event fires, but the modal's SHOW.BS.MODAL fires too. Whhere is a problem?
$(document).ready(function() {
$('#ArrDate')
.datepicker()
.on("show", function(event){
alert("Q");
});
$("#dlg3000to3100")
.on('show.bs.modal', function (event) {
alert("W");
});
$("#dlg3000to3100")
.modal("show");
});
exampleExample
Thanks
It seems to be a bug (or feature?) of the datepicker. What you can do is to prevent the show.bs.modal event reaching the dialog.
$('#ArrDate').on('show.bs.modal', function (event) {
event.stopPropagation();
});
This will detect the event at the datepicker level and stop the event propagation, so show.bs.modal will not 'bubble up' to the dialog.
Another work around is to swap the show.bs.modal with shown.bs.modal on modal event.
modal.on('shown.bs.modal', function (event) {
// Do something
});
however if it is not possible to swap show with shown or hide with hidden use the namespace check
modal.on('show.bs.modal', function(e) {
if (e.namespace === 'bs.modal') {
// Do something
}
});
Had a similar issue, caused by the datepicker watching for a show event.
One option is to use the shown event on the modal but this is not ideal in all cases
$('#dlg3000to3100').on('shown.bs.modal', function (event) {
// modal code in here
});
A more elegant solution is to check the namespace of the event
$('#dlg3000to3100').on('show.bs.modal', function (event) {
if(event.namespace !== 'bs.modal') return;
// modal code in here
});
https://jsfiddle.net/bzh75tww/
I have a page with links of class 'dialog' that generate in JQueryUI dialog when clicked. Those dialogs are created from other elements present on the page, and can contain links of class 'add_tab', that should create a new JQueryUI [tab] (http://jqueryui.com/demos/dialog/) when clicked. Those tabs load their content via Ajax and consist identical structures. This means that an 'add_tab' link in a dialog creates a new tab, which contains 'dialog' links that generate dialogs containing further 'add_tab' links, and so on.
This is the basic HTML structure:
<div id="tabs">
<ul>
<li>tab 1</li>
</ul>
<div id="tabs-1">
<p>This tab contains a popup and a direct link to a new tab.</p>
<div id="popup1" style="display:nonee;">This popup contains a link to a new tab.</div>
</div>
Using JQuery 1.7's .on() method, I have troubles with properly registering the click handler for 'add_tab' links that appear in dialogs on added tabs. I manage to register the click handlers for the 'dialog' links in newly generated tabs (so that they generate a dialog), but fail to register click handlers for 'add_tab' links that appear inside those dialogs. I've put a simplified test version online at http://www.kantl.be/ctb/temp/jquerytest/tabs1.htm. Take, for example following scenario:
on http://www.kantl.be/ctb/temp/jquerytest/tabs1.htm , click 'popup': this will generate a JQueryUI dialog
in the dialog, click 'new tab': this will generate a new JQueryUI tab
in the the newly added tab labeled 'tabs2.htm', click 'popup': this will generate a JQueryUI dialog
in the dialog, click 'new tab': this will NOT generate a new JQueryUI tab, but instead open the target in a new window
==> this illustrates how this event handler is apparently NOT registered correctly for 'add_tab' links that occur inside dialogs that are generated in newly added tabs
in the tab labeled 'tabs2.htm', click 'new tab': this will generate a new JQueryUI tab
==> this illustrates how this event handler is registered correctly for 'add_tab' links that occur directly inside newly added tabs
This is my javascript code:
// these event registrations register clicks on $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs
// note: this event registration works for all such links on the original page
$('a.dialog').on('click', function(){
$($(this).attr('href')).dialog();
return false;
});
$('a.add_tab').on('click', function(){
$tabs.tabs( "add", $(this).attr('href'), 'added tab');
$('.ui-dialog-content').each(function(){$(this).dialog('close')})
return false;
});
// tabs: upon creation, register clicks on nested $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs
var $tabs = $( "#tabs" ).tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
$tabs.tabs($tabs.tabs('option', 'selected'))
.on('click', 'a.dialog', function(){
$($(this).attr('href')).dialog();
return false;
})
// this registration doesn't seem to work for <a class="add_tab"> links occurring inside generated JQueryUI dialogs inside added JQueryUI tabs
.on('click', 'a.add_tab', function(){
$tabs.tabs( "add", $(this).attr('href'), 'added tab');
return false;
});
}
});
I'm nearly there! Could anyone help me out with the last event handler in the code above? Any help is much appreciated!
The idea with event delegation is to bind the event on a parent that is fixed on the page (not created dynamically). Using the selector parameter of the .on() method allows telling for which elements the event handler should be fired for.
In your code you are using event binding in two ways, event if you use .on():
first you do direct binding on the existing elements a.dialog and a.add_tab - this will only work for the links on tab1 as they are the only the ones existing at the time the code is executed, no event delegation here.
when adding a tab, you are doing event delegation on the tab container $tabs:
for the links to open a dialog with $tabs.on('click', 'a.dialog', function(){ ... }) - this works as expected because the link a.dialog are indeed within the tab container.
for the links in the dialog with $tabs.on('click', 'a.add_tab', function(){ ... }) - this won't work because when the dialog is created, the plugin moves the <div id="popup2"> at the end of the body (before </body>). So when you click the a.add_tab inside the dialog, it is not a descendant of the tab container anymore and event delegation does not happen.
Here's what I would do:
to avoid repeating the same code, declare your event handlers as variables
use event delegation on the tab container for links a.dialog and a.add_tab
when creating a new dialog, use event delegation on the dialog for the a.add_tab links it will contain
Here's the code:
var addTabClickHandler = function(e) {
$tabs.tabs("add", $(this).attr('href'), 'added tab');
$('.ui-dialog-content').each(function() {
$(this).dialog('close')
})
return false;
};
var dialogOpenClickHandler = function(e) {
$($(this).attr('href'))
.dialog()
.on('click', 'a.add_tab', addTabClickHandler);
return false;
}
var $tabs = $("#tabs").tabs({
add: function(event, ui) {
$tabs
.tabs('select', '#' + ui.panel.id)
.tabs($tabs.tabs('option', 'selected'));
}
});
$tabs
.on('click', 'a.dialog', dialogOpenClickHandler)
.on('click', 'a.add_tab', addTabClickHandler);
Meanwhile I've come up with a workaround that just registers the event handlers once on the 'tabs' container and appends the dialog to the 'tabs' container upon creation. My initial code could thus be trimmed down to:
// tabs: upon creation, register clicks on nested $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs
var $tabs = $( "#tabs" ).tabs({
create: function(event, ui) {
$(this)
.on('click', 'a.dialog', function(){
// dialog: upon creation, move the dialog to the tab to ensure delegated event registration
$($(this).attr('href')).dialog().parent('.ui-dialog').appendTo($tabs);
return false;
})
.on('click', 'a.add_tab', function(){
$tabs.tabs( "add", $(this).attr('href'), $(this).attr('href'));
$('.ui-dialog-content').dialog('close');
return false;
})
}
});
I'm having some trouble with blur and click events in backbone. I have a view (code below) that creates a little search entry div with a button. I pop open this div and put focus on the entry field. If someone clicks off (blur) I notify a parent view to close this one. If they click on the button I'll initiate a search.
The blur behavior works fine, however when I click on the button I also get a blur event and can't get the click event. Have I got this structured right?
BTW, some other posts have suggested things like adding timers to the div in case its being closed before the click event fires. I can comment out the close completely and still only get the blur event. Do these only fire one at a time on some kind of first-com-first-served basis?
PB_SearchEntryView = Backbone.View.extend({
template: _.template("<div id='searchEntry' class='searchEntry'><input id='part'></input><button id='findit'>Search</button></div>"),
events: {
"click button": "find",
"blur #part": "close"
},
initialize: function(args) {
this.dad = args.dad;
},
render: function(){
$(this.el).html(this.template());
return this;
},
close: function(event){ this.dad.close(); },
find: function() {
alert("Find!");
}
});
I am not sure what the problem was, but here is the jsbin code.
Can I do this:
$('.box').delegate('.edit', 'click', function(edit_event){
...
var input = $('input', this);
input.focus().bind('blur keypress', function(event){
// here disable the first .edit event (don't allow click on that element)?
});
});
the event would be enabled again if certain conditions are met inside the 2nd event (and when a AJAX call is complete)
Since you're using the delegate()[docs] method, which is selector based, you could just add a class to the current .edit that excludes it from the selector.
// only invoke if it has "edit" class and not "disable" class
$('#box').delegate('.edit:not(.disable)', 'click', function (edit_event) {
// add the class to this edit element to disable it
var edit = $(this).addClass('disable');
var input = $('input', this);
input.focus().bind('blur keypress', function (event) {
// here disable the first .edit event (don't allow click on that element)?
// after some work, remove the class to re-enable the click
edit.removeClass('disable');
});
});
I used the not-selector[docs] so that the click event won't fire until the disable class is removed.
i´ve got a question about mootools eventhandling.
I wanna delay a mouseenter event for a dropdown navigation. After 1 second the drowdown list will be shown by "setStyle('display', 'block')...this is what i´ve got so far, and it´s working:
$('main-nav').getElements('li.level-1 ul.quick-nav').setStyle('display', 'none');
$('main-nav').getElements('li.level-1').each(function(elem){
var list = elem.getElement('.quick-nav');
elem.addEvents({
'mouseenter' : function(event){
(function() {
elem.getElement('.quick-nav').setStyle('display', 'block');
}).delay(1000)},
'mouseleave' : function(event){
elem.getElement('.quick-nav').setStyle('display', 'none');
}
});
});
I´ve delayed the mouseenter event with the delay function...the problem i got and still can´t solve is that the mouseenter event will although happen when i already left my navigation item. I enter the item, leave the item immediately, and after one second the subitem still appears. I therefore need some kind of check within the mouseleave event, wheather my menuitem is already displayed or not. Then i could stop the mouseenter event, if the menuitem is still not visible... I don´t know how i can respond the mousenter event from the function of the mouseleave event...hope anybody understood this...
Thanks in advance.
use a timer and clearTimeout on mouseleave (also $clear(timer) in older versions of mootools).
$('main-nav').getElements('li.level-1 ul.quick-nav').setStyle('display', 'none');
$('main-nav').getElements('li.level-1').each(function(elem) {
var list = elem.getElement('.quick-nav');
var timer;
elem.addEvents({
'mouseenter': function(event) {
timer = (function() {
elem.getElement('.quick-nav').setStyle('display', 'block');
}).delay(1000)
},
'mouseleave': function(event) {
clearTimeout(timer);
elem.getElement('.quick-nav').setStyle('display', 'none');
}
});
});