Attach event to document other than 1 div - javascript

I have created an inspector type feature that will give you a divs ID when you click anything on the page. I have used:
document.attachEvent('click', inspectorOnClick);
I've now decided to add another feature, I now need this event attached to everything in the document other than one div is that possible?
EDIT:
I thought one of the links in the comments solved my problem, but there is a bit more to it than I thought.
Let me explain, when the document loads.
document.attachEvent('click', inspectorOnClick);
Is attached, once an element is clicked I dynamically create an overlay div in the position of the cursor. I want to take the event off of this dynamically created div. I have tried:
//prepend dynamicly created div to body
document.body.insertBefore(overlayDiv, document.body.childNodes[0];
var getOverlay = document.getElementsByClassName('bsOverlay');
getOverlay.attachEvent("click", function(){ return false; }
I have also tried a different last line which is
getOverlay.detachEvent("click", inspectorCancel)

Related

Add js to MapBox popup

Currently I have a mapbox map that outputs markers, each marker popup has a link within it, once clicked it will only show markers relative to the original marker clicked.
The view areas link is structured like:
<p class="view_areas" id="123">View Areas</p>
And the resulting js like:
$('.view_areas').click(function() {console.log('test')})
However clicking the link fails to produce any sort of result from the console. Is this because the marker doesn't exist on the DOM until it is clicked? I've also attempted doing:
<p class="view_areas" id="123" onClick="view_areas()">View Areas</p>
<script>function view_areas(){ console.log('test'); }</script>
But this produces a function not found error. Basically the link will serve as a toggle, however because of the large amount of markers that will be on the screen, using layers would be a bit impractical.
Yes, it is exactly because the element is dynamically added to the page after DOM load. You can use event delegatation to target the .view_areas elements by attaching the click handler to a parent element, such as document and using the following syntax:
$(document).on('click', '.view_areas', function() {
console.log('test');
});
This strategy can be used for basically any dynamically added elements and will target the children elements specified in the 2nd parameter of on(). If you know that the modal/dialogs are contained within a specific element that is not dynamically added to the page, you can target that instead of the document/body/etc.
$('.somePermanentContainerElement').on('click', '.view_areas', function() {
console.log('test');
});
Hopefully this helps!

jQuery toggling dynamically generated nested elements

I'm currently designing a webpage presenting a twitter-like user input that generates an <li> (inside a <ul>) element in which are appended one <h6> element (the post's title) and a <p> element underneath (the content).This works, therefore the input and generation of elements is not the problem.
But what I want to do is use jQuery to hide the posts's content, and toggle it when I click on the post's title. The issue is that the event handler seems to work only for every second post. Whenever i post once more, the 1st post on the list can be toggled, the second not, third yes, etc.
From what I've seen in some answers, I've tried the .click() method, the .on() method, I've tried to replace .toggle() with.hide() and .show() under conditionals, then created a class with display:none to toggle on click. This was my last stop, and the result is described in the above paragraph. Here's the event handler:
$('.postinstance').on("click", "h6.postname", function() {
$(this).siblings().toggleClass('postOff');
});
The .siblings() is actually only the post content, but that's the only way I could get near what I wanted. When I replace $(this).siblings() with the actual class of the content element, every post's content toggles when I click on any title.
How can I make each post open individually when I click on it?
Here's a JSFiddle isolating the input & posts part.
I have looked thoroughly in Stack Overflow and other places, even tutorials, to solve this problem but although similar questions were found none of their answers provided a solution.
You should not attach event handlers to dynamically generated elements directly, instead use some common parent element. Here's a piece of your snippet where I changed the selector and everything started working:
$('.postlist').on("click", "h6.postname", function() {
$(this).siblings().toggleClass('postOff');
});
Important note: you must pull this piece of code out from $('.postbtn').click(..) one level up, otherwise for even number of posts toggling will not work!
And move this out of click handler:
$('.postlist').on("click", "h6.postname", function() {
console.log(this);
$(this).siblings().toggleClass('postOff');
});

adding a new section on webpage using only css and js

I am trying to click on an image on my webpage and it open a new section on the page that would be created in css and javascript/jquery. I thought about using .addclass() but i am not entirely sure how to go about it. Can anyone give me an example of this being done?
An example by clicking on a element with the id foo and adding a div with the id bar after that element:
$("#foo").click(function(){
$(this).after('<div id="bar">Some content</div>');
});
Of course, there are multiple methods in jQuery which insert content somewhere in the DOM tree, see:
https://api.jquery.com/category/manipulation/dom-insertion-outside/
https://api.jquery.com/category/manipulation/dom-insertion-inside/
There are many ways to do it. As an example, you can simply attach a click event handler to your image, like so:
$('img').click(newSection);
function newSection() {
$('#someDiv').append('<div class="newSection"></div>');
}

Cloning elements that have Twitter Bootstrap popover produces a popup in the wrong place

I have had problems getting Bootstrap popovers working with dynamically created elements (but that's for a different question).
So as a workaround, and because the content of these popover elements is not actually dynamic itself, I decided to create a series of hidden elements with popovers that are already in the DOM when the HTML loads. I then planned to clone them using JQuery's clone() and place them where I need them.
The problem is that whilst the new cloned popovers fire, the popover is in the wrong position.
The HTML looks like this
<div style="display: none">
<span id="anid" class="popoverbottom label label-info" data-title="Title" data-content="Content">TAG</span>
</div>
I then register the popover event on the popoverbottom class using code like this:
$(".popoverbottom").popover( {placement : 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }} );
I then clone the element with the popover on it using JQuery code like this:
e = $('#anid').clone(true);
e.attr('id','anewid');
I then append() the new element dynamically and it appears fine. If I hover over it, a popover fires, but it appears in the top left hand corner of the browser window - half cut off on the left hand side.
If I make the <div> containing the popover elements visible - i.e. remove the display:none, then the popover appears over the original, non-dynamically created DOM element instead of the new cloned one.
This is obviously because when the popover was registered, the popover was tied to the original element. Whilst JQuery's .clone(true) appears to copy the element and the associated events, the original popover position isn't updated.
Is there a way to tell the popover that it's been cloned and it needs to attach the popover to an new element?
Or, would I be better off trying to get dynamically-created popovers working a la this jsFiddle snippet.
As mentioned above, I did try to get this dynamic approach to work but had issues where multiple popovers would stay on the screen and not hide when the mouse moved away - but that's for another question.
Any advice would be appreciated.
I think the problem is that Bootstrap creates the popovers before you've added all the cloned popover nodes to the DOM. You need to register the newly-appended popovers. Don't call $(".popoverbottom").popover() until you've appended all the cloned nodes. $.clone(true) copies events, but it doesn't attach functions. popover() is a function, not an event.

a hideable and 'recyclable' javascript context toolbar

I am searching for plugins/scripts that provide a toolbar when hovering elements of a big list. Almost like in this question:
JavaScript/HTML hover menu/toolbar
However, I don't want it to be a css-menu-like one. As I said, It will be a very big list and I would like its markup not to be duplicated n times. So I need a javascript that will move the same toolbar from list element to list element when they're hovered.
I know the YUI2 tooltip applies this strategy of moving the tooltip element, and changing the contents at display, but it's only for informative text displaying. I can't add buttons to it, and it's positionned according to the actual mouse position, and not to the element hovered.
ps: I tagged this question jQuery because the project is using it but i'm open to any framework-dependant or not solution.
Something like this should work:
var toolbar = $('#toolbar');
$('#yourTable').delegate('.has-tooltip', 'mouseenter', function() {
toolbar.insertBefore(this);
}).delegate('.has-tooltip', 'mouseleave', function() {
toolbar.detach();
});
The delegate will trigger for those events on elements matching .has-tooltip which are inside #yourTable.

Categories

Resources