I use a jQuery library that dynamically creates a link with a click event like:
$parent.append('<div class="add-row">Add another contact</div>');
addButton = $parent.find("div:last a");
addButton.click(function(e){
e.preventDefault();
load_contact_creation_form();
});
I want to add some code to my page so when the URL contains a specific flag, the addButton.click event is fired automatically.
Inspecting with the Firefox/Chrome debug tool, I can easily find the link with:
$('.add-row a')
However, attempting to using $('.add-row a').click() to click it does not trigger the custom 'click' event.
Why is there a disparity between .click() and a real mouse-click? How do I trigger the custom click event handler in this case? The code that generates the link is an external library, so I can't easily modify it.
It seems to work as expected for me. Check this fiddle : http://jsfiddle.net/d3s8topL/
$("#addDiv").click(function (){
$("#test").append('<div class="add-row">Add another contact</div>');
var addButton = $("#test").find("div:last a");
addButton.click(function(e){
e.preventDefault();
alert("asdasd");
});
});
$("#triggerClick").click(function () {
$(".add-row a").click();
});
You need a MutationOberserver but,Mutation Observer API is only available in newer versions of Google Chrome (>= 18) and Mozillza Firefox (>= 14). So you could use a jQuery plugin for that. Using the plugin, you could do
$('.add-row').observe("childlist", "a", function(){
$(this).click(); // trigger
});
Related
There is a React plugin that generates a WordPress form and I want to add a focusout type of event to the inputs from my theme JS. I tried the following from my theme JS
$(document).on('focusout','.formInput input',function(){
console.log('test');
});
// also tried this
$(".formInput").focusout(function() {
console.log('test');
});
// and this
$(".formInput").on("blur", function(){
console.log('test');
});
//and this
document.getElementById( "firstName" ).onblur = function(){
console.log('test');
};
and none of these work. No errors. It seems as though the firing order is wrong. Is it how React is building the DOM? Any ideas from anyone on what I should be doing?
-thx
The reason this was not working was because React uses a virtual DOM not an actual DOM. The key was to use the body selector and then a jQuery 'on' function:
$("body").on('focusout', '.formInput', function(){
console.log('test');
});
Hi, I am using jQuery in my application and for swiping event I used jquery mobile, due to usage of both in one application I had an issue that is the swiping event gets fired twice, one time from my own js file and second time the code copied into jquery.min.js, and executing from there.
$(document).ready(function(){
var wrap = $('.slides_wrap');
var slides = wrap.find('.img_slide');
slides.on('swipeleft', function(e) {
console.log('called swipeleft');
$('a.carousel-control .rightArrow').click();
});
slides.on('swiperight', function(e) {
console.log('called swiperight');
$('a.carousel-control .leftArrow').click();
});
});
Try:
slides.parent().off("swiperight").on(...).click();
or:
slides.parent().off("click").on(...).click();
I think you have bind multiple events in closest elements. If this not work, try with .children() too.
I played around with a webdesign where jQuery is available. There is now a point where I need the opposite Eventwatching, so I realized it already with a jQuery routine which installs an "onnomousemove" event. Yes, you read correct, an NOT HAPPENING EVENT.
(Below) you find my allready working solution in jQuery. The idea is to have control over not happening Events and to react on that via this extra specified jQuery.Event
Hehe, I know most stupid would be to handle "onnoerror" Events with this. But thats not desired. Its working now and I want to go a step forward here. So what is my problem?
Here it comes: How to fire the same behavior with native Javascript EventListening so element.addEventListener(...); can handle the same Events too?
Problem: newer Web browser like Chrome, Firefox have an implemented CustomEvent handling to make this happen, but in older browsers there should be a way with prototype or so.
I'm a bit jQuery blind now, anyway is there somebody out there who knows the freaky trick to generate Custom Events in a traditional way without prototype.js or other libraries? Even a solution with jQuery would be fine, but desired goal is the native listener should be able to handle it.
jQuery:
(function($){
$.fn.extend({
// extends jQuery with the opposite Event Listener
onno:function(eventname,t,fn){
var onnotimer = null;
var jqueryevent = {};
$(this).on( eventname, function(e){
window.clearTimeout(onnotimer);
function OnNoEventFn(){
jqueryevent = jQuery.Event( "onno"+eventname );
$(this).trigger(jqueryevent);
e.timeStampVision=e.timeStamp+t;
e.timer=t; e.type="onno"+eventname;
fn(e);
}
onnotimer = window.setTimeout( OnNoEventFn, t);
});
return $(this);
}
});
})(jQuery);
$(document).ready(function() {
// installs "onnomousemove" and fires after 5sec if mousemove does not happen.
$(window).onno('mousemove', 5000, function(e){
console.log('function fires after:'+e.timer+'ms at:'+e.timeStampVision+'ms with:"'+e.type+'" event, exact fired:', e.timeStamp);
});
// installs "onnoclick" and fires after 4sec if click does not happen.
$(window).onno('click', 4000, function(e){
console.log('function fires after:'+e.timer+'ms at:'+e.timeStampVision+'ms with:"'+e.type+'" event, exact fired:', e.timeStamp);
});
// just for demonstration, routine with "onno.." eventnamescheme
$(window).on('onnomousemove',function(e){
console.log( 'tadaaaa: "'+e.type+'" works! with jQuery Event',e);
});
// same for "onnoclick"
$(window).on('onnoclick',function(e){
console.log( 'tadaaaa: "'+e.type+'" works! with jQuery Event',e);
});
});
// but how to install Custom Events even in older Safari ?
// newer Chrome, Firefox & Opera have CustomEvent.
window.addEventListener('onnomousemove',function(e){
console.log('native js is watching you',e);
},false);
I need to add an event listener for keypress after the CKEditor is loaded.
The code is something like:
CKEDITOR.instances.editor1.document.on('key', function(event) {
/* instructions */
});
Any idea where can I add the code for that? In which file or in what way?
Code to archive it is something like this:
CKEDITOR.on('instanceCreated', function(e) {
e.editor.on('contentDom', function() {
e.editor.document.on('keyup', function(event) {
// keyup event in ckeditor
}
);
});
});
Edit - 2014 - Since this answer is still getting some upvotes, i felt it would be fair to point out, that it was meant for CKEditor in version 3.x. With the version 4.x there is a change event, which will trigger not only on key events but also after pasting, undo, redo etc.
In code its something like this:
CKEDITOR.on('instanceCreated', function(e) {
e.editor.on('change', function (event) {
// change event in CKEditor 4.x
});
});
Do you need to track changes?
I was originally using the solution above, but I ended up replacing it with the OnChange CKEditor plugin. This is useful in some special cases - for example, if you add a link using the toolbar, keypress won't register anything.
Here's a code example, updated to use instanceCreated (install OnChange first):
CKEDITOR.on('instanceCreated', function(e) {
if (e.editor.name === editorId) { //editorId is the id of the textarea
e.editor.on('change', function(evt) {
//Text change code
});
}
});
Update: According to the answer above, CKEditor now has a built-in change event, so you don't have to install the plugin to use this solution anymore. You can still use the second line of code to apply the change to the instance of CKEditor you want to edit.
If the keydown logic makes sense for a given plugin, you can include it in the plugin's definition:
CKEDITOR.plugins.add('customPlugin', {
// definition keys...
init: function( editor ) {
// Plugin logic
...
// Register a keydown event handler -- http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-key
editor.on('key', function(event) {
console.log('CKEDITOR keydown event from customPlugin'); // successfully captures keydown when registered from plugin
}
});
I've tested some of the solutions proposed here and I got my anwser when I found this link: http://alfonsoml.blogspot.com.br/2011/03/onchange-event-for-ckeditor.html
The following code worked like a charm:
editor.on('contentDom', function()
{
editor.document.on('keydown', function( event )
{
if ( !event.data.$.ctrlKey && !event.data.$.metaKey )
somethingChanged();
});
});
CKEDITOR.instances.editor1.on('change', function () { //Do something here.});
This code registers any change event including copy-paste.
You add that code in your page, or in a .js file included in your page. There is no mystery about that code.
Tipsy jquery plugin is installed in my app
This is in my load function
$(function() {
tipsy();
});
Below code is in a js file
var htm = '<div id="new_div" onmouseover="tipsy(this);">' ;
function tipsy(tip)
{
if ( '' != sumtitle )
{
tip.title = tip.innerHTML;
}
else if(tip)
{
tip.title = tip.innerHTML;
}
$(tip).tipsy({gravity: 'w'});
}
How is that the normal title shows up first and then the jquery tip later.
This is a known bug and will be fixed in the next version. For now please use the "Download Source" link on this commit:
http://github.com/jaz303/tipsy/commit/88923af6ee0e18ac252dfc3034661674b7670a97
The tipsy plugin seems to remove the title attribute and assign its value to a custom attribute called original-title to avoid the default browser tooltip from showing. Maybe in your case, this happens too late: The mouse hovers over the element, this initiates the native browser tooltip. Then, tipsy() is executed on the element and switches the attribute name, but that is too late because the timeout for the native tooltip has already started.
You should probably prevent the default action of the event, for example:
$('#new_div').bind('mousover', function (e) {
tipsy(this);
e.preventDefault();
});
EDIT: As this does not seem to have the desired effect, please call tipsy($('#new_div')) right after the div is created and remove the mouseover handler. What you have been doing might be a bit problematic anyway: The tipsy plugin probably uses the mouseover event, and you call .tipsy( { gravity: 'w' } ) in an onmouseover event handler. Repeatedly, if you mouseout and then mousover again. That's a lot of unnecessary event assignments.
You're doing it wrong.
Try this:
$('#new_div').tipsy();
jQuery is designed for using the selectors in JS code. No onsomething events in HTML, please.
Another way is, instead of using the 'title' attribute, use 'original-title' attribute.