I am trying to alert when I click on an anchor tag with id small-text.
The element is inside a Bootstrap popover. However, when I remove it and put it anywhere outside the popover, the alert starts workings whenever I click on the link.
I have no idea what's happening.
DEMO https://jsfiddle.net/08sa99uk/4/
HTML
<div class="article-links">
<span class="font">
<a href="#"
data-container="body"
data-toggle="popover"
data-html="true">
<i class="fa fa-font fa-2x"></i>
</a>
<span class="font-size" style="display: none">
S
</span>
</span>
</div>
Javascript
// This is the function that allows me to use an external div for the popover content
$('.font a').on('click', function(e) {e.preventDefault(); return true; }).popover({
html: true,
placement: 'bottom',
content: function() {
return $('.font-size').html();
}
});
$('a#small-text').on('click', function() {
alert('clicked');
});
The problem is that the element in question does not exist when the DOM is rendered. If you inspect the rendered popup (typically, F12 in the browser or right click and Inspect Element), that Bootstrap is creating, it's copying your template and appending it to the DOM inside the popup wrapper:
<div class="popover fade bottom in" role="tooltip" id="popover192086" style="top: 27px; left: 0px; display: block;">
<div class="arrow" style="left: 31.7073%;"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">
S
</div>
</div>
Since this occurs, you need to delegate the second click event:
$(document).on('click', 'a#small-text', function() {
alert('clicked');
});
DEMO
Note: It should be noted that delegating at the document level is inefficient. You'll want to replace document in the code above with the closest parent code that exists in the DOM prior to initialization.
EDIT:
Regarding the latest comment below about the delegation not working with span.font, here is the fully rendered DOM layout that Bootstrap creates:
<body>
<!-- Your original code -->
<div class="article-links">
<span class="font">
<a href="#" data-container="body" data-toggle="popover" data-html="true" data-original-title="" title="" aria-describedby="popover186211">
<i class="fa fa-font fa-2x"></i>
</a>
<span class="font-size" style="display: none">
S
</span>
</span>
</div>
<!-- Bootstrap added code -->
<div class="popover fade bottom in" role="tooltip" id="popover186211" style="top: 27px; left: 0px; display: block;">
<div class="arrow" style="left: 31.7073%;"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">
S
</div>
</div>
</body>
Notice that in the Bootstrap rendered code, there is not a span.font. UI libraries tend to extract user created templates and then add additional code to make them perform in the desired way. In this case, you'd have to add the delegation code to the next outer element, possibly body. For your use case, it's probably fine to use document this once. I would not make a habit of it though.
Related
I made a whole li element clickable by making use of anchor tag as such:
<li *ngIf="notification.payload.table">
<a class="d-flex justify-content-between" (click)="updateTableNotificationReadStatus(notification)">
<div class="d-flex flex-column">
<span style="font-size: 1.1rem">
<strong>{{notification.payload.username}}</strong> requested access for table - {{notification.payload.table}}.
<span style="font-size: 0.9rem">{{notification.payload.time}}</span>
</span>
<span *ngIf="notification.payload.note"class="note">
<span class="noteLabel">Note</span>
<span> This is a note attached to it</span>
</span>
</div>
<span>
<fa-icon [icon]="faClose" class="ml-auto" (click)="deleteNotification(notification)"></fa-icon>
</span>
</a>
</li>
When I click on the fa-icon, the notification is getting deleted but I am also getting redirected to another page because of the function in which I doesn't want?
How can I make the close icon clickable without getting redirected while being on the same element?
It seems to me that you need something similar to this question AngularJS ng-click stopPropagation
To stop propagating the event
$event.stopPropagation();
I achieved that using:
deleteNotification(e, notification) {
e.stopPropagation();
}
Here is the code:
<div ng-click="grid.appScope.navToPage(row)"class="ui-grid-cell" ui-grid-cell style="cursor: pointer">
<div class="ui-grid-cell-contents">
<a ng-href="/mywebpage/2" target="_blank">
<span class="glyphicon glyphicon-new-window"></span>
</a>
</div>'
</div>
I want to figure out some way to be able to click the a tag link without clicking the div with the ng-click. Is there a good way to do this?
You can prevent click propagation using the $event.stopPropagation() which is available on many angular directives such as ng-click. Please have a look at this question AngularJS ng-click stopPropagation
In your case, the anchor tag should look like this:
<a ng-href="/mywebpage/2" ng-click="$event.stopPropagation()" target="_blank">
<span class="glyphicon glyphicon-new-window"></span>
</a>
Try this
<a ng-href="/mywebpage/2" target="_blank" ng-click="$event.stopPropagation()"><span class="glyphicon glyphicon-new-window"></span></a>
The field Description is optional and only appears when the user clicks on the + Description button. However when another div is generated the code loses the focus of the element it should hide and the button doesn't work anymore.
<script>
$(document).ready(function(e){
$(document).on('click', '#hide-desc', function(e) {
$("#description").slideToggle();
});
});
</script>
I have a button to remove and add the following div:
<div class="item-wrapper">
<div class="item-inner-wrapper">
<!-- Among other stuff -->
<div id="description" class="item-child-desc">
{{ form }}
</div>
</div>
<div class="item-action-button">
<!-- Deletes item-wrapper and another button adds it -->
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
</div>
I know the function must be able to identify which description I am talking about, but I don't know how to do that. I tried to get the parent div of the button and specify the div with method find() but I could not make it work.
I have the same problem happening with an autocomplete function. I believe I will get both working if I can figure out what I have to do.
Based on your comments, I assume your html sort of looks like this (note that we use .description rather than #description since those are not unique elements):
<div class="item-wrapper">
<div class="item-action-button">
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
<div class="description" class="item-child-desc">
blergh
</div>
</div>
We just have to look for the parent .item-wrapper using e.target to reference the source of the event then search the child .description:
$(e.target).parents(".item-wrapper").find(".description").slideToggle();
Based on the sample html you've added, the following should also work without modification:
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle();
It's also possible to just use this:
$(this).parents(".item-wrapper").find(".item-child-desc").slideToggle();
In all cases, the crucial part is parents(".item-wrapper").
I'm not entirely certain of the question, but if my understanding is correct I believe I may have found a solution for you. Using jQuery Event Delegation, it's relatively simple!
Run this code snippet and see if I'm close to a solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<script>
$(document).ready(function (e) {
$(".item-action-button").on('click', '.hide-desc', function (e) {
$(e.delegateTarget).find(".item-child-desc").slideToggle();
});
});
</script>
<style>
.item-child-desc {
display: none;
}
</style>
The problem with using ids for event handling is that they are only ever registered with the last element with that matching id. If you want one event handler for all elements of a certain type, register an event handler with elements of a certain class or tag. You'd be doing yourself a disservice otherwise.
Hope this helps!
So basically I have a control on my page which when clicked needs to toggle two different elements with two different CSS classes.
I have managed to get it to toggle one of the controls, but not both.
Here is my element:
This is the element that needs to trigger both controls.
<a id="main-menu-toggle" data-toggle="collapse" data-target="#sidebar" class="hidden-xs open"><i class="fa fa-bars"></i></a>
The first element (That is working):
<div id="sidebar" class="col-lg-2 col-sm-1 collapse" style="min-height: 759px; display: block;">
</div>
Here is the second element(That i need to add):
For this element i need to trigger the CSS class 'full' when the button is clicked and then not full when its clicked again.
<div id="content" class="col-lg-10 col-sm-11 full">
</div>
I have tried to do this to the hyperlink control and it still doesn't work:
<a id="main-menu-toggle" data-toggle="collapse,full" data-target="#sidebar,#content" class="hidden-xs open"><i class="fa fa-bars"></i></a>
Does anyone know how I can get this working using AngularJS?
Try using "ng-class".
Reference:
https://stackoverflow.com/a/16529903/5052704
Hope this helps.
Here is a JSFiddle usign ng-class and ng-click:
<a id="main-menu-toggle" data-toggle="collapse" data-target="#sidebar" class="hidden-xs open" ng-click="clicked = (clicked) ? false : true">
<i class="fa fa-bars"></i>click
</a>
<div id="sidebar" class="col-lg-2 col-sm-1 collapse" ng-class="{'full': clicked}" style="min-height: 759px; display: block;">
THEDIV
</div>
You can use ngClass for class and ngStyle for style manipulation.
I'm new to angular, been trying to fix this for about an hour now but can't get it working. I have some html code:
<li class="notification-dropdown hidden-xs hidden-sm">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
...
The notification pop-dialog is hidden by default and the following JQuery shows it when the .notification-dropdown is clicked
$(document).on("click", ".notification-dropdown", function (e) {
e.preventDefault();
e.stopPropagation();
// hide all other pop-dialogs
$(".notification-dropdown .pop-dialog").removeClass("is-visible");
$(".notification-dropdown .trigger").removeClass("active");
var $dialog = $(this).children(".pop-dialog");
$dialog.toggleClass("is-visible");
});
For some reason, this code does not work when I put the html into AngularJS's ng-view loaded as a partial into a main html document.
I've already loaded the JQuery lib before Angular.
I've tried to shorten the code for simplicity, I can show more code if needed.
Best try to avoid using jQuery with AngularJS completely. Using both together in this fashion is a common mistake among those new to Angular, coming form a jQuery background. Here is a great answer on that topic: "Thinking in AngularJS" if I have a jQuery background?
You could just use ui bootstrap´s dropdown.
Alternatively, there are ngShow and ngIf. If you still want to use your own css class to hide it, just set the class with ngClass.
Then, you can use ngClick to recieve the click event.
Here is how it would look (HTML only, you dont even have to write any JS for this):
<li class="notification-dropdown hidden-xs hidden-sm" ng-click="showDialog = !showDialog">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog" ng-show="showDialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
<!-- body content -->
</div>
</div>
</li>
EDIT : Added Code
EDIT : working plunk