When I use the following jquery live function
$("a[rel]").live('click', function () {
e.preventDefault();
alert('clicked');
});
e.preventDefault(); does not work, because the action behind the a tag is still fired.
How do I prevent an event when I use jQuery.live?
Don't forget the e inside the function argument list.
$("a[rel]").live('click', function (e) {
e.preventDefault();
alert('clicked');
});
You could also try adding
return false;
to the function.
You are missing e argument to the function, try this:
$("a[rel]").live('click', function (e) {
e.preventDefault();
alert('clicked');
});
Related
I try to limit the number of possible indentations in TinyMCE but I can't find an option to do them, do you have an idea? Thank you
TinyMCE fires a variety of events as you work with the content. If you want to stop someone from indenting the content you would have to capture the event that is triggered when someone clicks the indent button and decide the action you want to take.
Here are some examples of the types of code you can use to listen for events:
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent('<p>This is the content in TinyMCE!</p>');
});
editor.on('init keydown change click blur', function (e) {
document.getElementById('data').innerText = editor.getContent();
});
editor.on('ExecCommand', function (e) {
console.log('ExecCommand:', e.command);
if (e.command === "indent") {
console.log('Someone clicked the indent key');
}
if (e.command === "outdent") {
console.log('Someone clicked the outdent key');
}
});
editor.on('NodeChange', function(e) {
console.log('NodeChange event fired', e);
console.log(editor.selection.getNode());
});
editor.on('change', function (e) {
console.log('change event fired');
console.log(e);
});
}
Here is a TinyMCE Fiddle that shows some of this sort of code in action: http://fiddle.tinymce.com/6fhaab/1
Once you know that someone clicked the indent/outdent these sorts of events give you access to the content that TinyMCE is about to modify and you can do what you need to modify or cancel the event.
I am redrawing layers on style.load event and removing the layers
map.on('style.load', function() {
loadByBounds(tempBounds)
});
function loadByBounds(b) {
if (map.getLayer("cluster-count")) {
map.removeLayer("cluster-count");
}
...
map.on('click', 'unclustered-point', function(e) {
var popup = new mapboxgl.Popup()
.setLngLat(e.features[0].geometry.coordinates)
.setHTML(text)
.addTo(map);
})}
But how to remove map.on('click') events? As when I click the point the Popup() displays 2 times. And when I change layer one more time the onclick event fires 3 times and so on. So I think I have to remove the click event but how? Thanks
You might wanna use map.once(). This will add a listener that will be called only once to a specified event type. However after 1 click event got fired this event listener won't listen to any further click events.
https://www.mapbox.com/mapbox-gl-js/api/#evented#once
With map.off() it's basically the opposite of map.on() and you can use it to unregister any applied event listeners. However you would need to add event listeners without an anonymous function in order to use map.off().
https://www.mapbox.com/mapbox-gl-js/api/#map#off
// you would need to use a named function
function clickHandler(e) {
// handle click
}
map.on('click', clickHandler);
// then you can use
map.off('click', clickHandler);
// With an anonymous function you won't be able to use map.off
map.on('click', (e) => {
// handle click
});
To prevent your app from registering multiple listeners you maybe need to set a flag that gets set after your first event listener got applied.
let notListening = true;
function loadByBounds(b) {
// ....
if (notListening) {
notListening = false;
map.on('click', (e) => {
// do something
});
}
}
Testing an angular app, the test are sometimes passing and sometimes failing...
My test cases look like:
it('test-1: should has main button', function () {
expect(page.demoButton).not.toBeUndefined();
});
it('test-2: should open modal on click secondary button', function () {
page.demoButton.click().then(function () {
page.SecondaryButton.click().then(function() {
expect(page.Modal).not.toBeUndefined();
});
});
});
it('test-3: should open modal with correct text', function () {
page.demoButton.click().then(function () {
page.SecondaryButton.click().then(function() {
expect(page.Modal.text.getText()).toEqual('Are you sure to cancel
this?');
});
});
});
If I run the test, sometimes the tests are passed sometimes some of them get failed..
Most of the time error is like: No element found using locator: By.cssSelector(".myButton"). or Cannot read property 'getText' of undefined
Thank you in advance!
I fixed that issue with using:
browser.waitForAngular();
As I see that issue occurs with getText and click events, So:
it('test-2: should open modal on click secondary button', function () {
page.demoButton.click().then(function () {
browser.waitForAngular();
page.SecondaryButton.click().then(function() {
browser.waitForAngular();
expect(page.Modal.text.getText()).toEqual('Are you sure to cancel
this?');
});
});
});
was the solution.
I am trying to understand how to pass data through my directive so that I can bind it at the view level. I believe I understand the separation of controller scope vs. the directive isolate scope but I cant seem to get a simple json result out to my view. My JSFiddle can be found here http://jsfiddle.net/jamesamuir/2KLVj/4/.
app.directive('testList', function (testService) {
return {
restrict: 'A',
link: function ($scope, element, attrs) {
$scope.name = 'isolate scope';
$scope.data = {};
$scope.data.loadtext = testService.getJSON().then(function (data) {
alert(data);
element.addClass("red");
});
}
}
});
It seems to me that this should work but, alas, it does not. Any help would be greatly appreciated.
Inside your then() callback, assign data to data.loadtext:
testService.getJSON().then(function (data) {
alert(data);
element.addClass("red");
scope.data.loadtext = data;
});
fiddle
I have this code:
$('*').mouseover(function() {
$('#log').text($('*').id);
});
When you mouse over any element on the page, I want #log to have the id of that element. Obviously the code above doesn't work... How do I do this?
$('*').mouseover(function() {
console.log($(this).attr('id'))
});
In almost all jQuery callbacks, "this" is the object on which the callback is being executed.
$('*').mouseover(function() {
$('#log').text($(this).attr('id'));
});
You can also use event.target
var $log = $("#log");
$('*').mouseover(function(event) {
$log.text($(event.target).attr('id'));
event.stopPropagation();
});