This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I have some elements can I'm moving into another div (from x to y). The problem is that the the elements in x are deletable but the new copied element is not.
Here is the first state
Here the state after deleting Filter 1
Here the state after adding the Name person above... but I can't delete it like the others elements!
I already checked the classes css and they seem okay.
Here my code.
JS
function AddFilters()
{
if ( $(".filter-edited").css('display') == 'none' )
{
$("#btn_add").html("Hide Filters");
// element is hidden
$(".filter-edited").fadeIn();
}
else if ( $(".filter-edited").css('display') != 'none' )
{
$("#btn_add").html("Add Filter");
// element is hidden
$(".filter-edited").hide();
}
}
$(document).ready(function() {
$('.removable').on('click', function() {
$(this).parent().remove();
});
});
$(document).ready(function() {
$('.addable').on('click', function() {
$(this).parent().appendTo(".filter-added");
$(this).attr('class', 'glyphicon glyphicon-remove pull-right removable');
});
});
HTML
<script src="../assets/own_js/addfilters.js"></script>
<div class="row add-filters">
<div class="col-md-12">
<div class="row ">
<div class="col-sm-10 filter-added">
<span> Filtered on: </span>
<a class="btn btn-default">
<span class="text">Filter 1</span>
<span class="glyphicon glyphicon-remove pull-right removable" ></span>
</a>
<a class="btn btn-default">
<span class="text">Filter 2</span>
<span class="glyphicon glyphicon-remove pull-right removable"></span>
</a>
<a class="btn btn-default">
<span class="text">Filter 3</span>
<span class="glyphicon glyphicon-remove pull-right removable" ></span>
</a>
</div>
<div class="col-sm-2 pull-right">
<a class="btn btn-default" id="btn_add" onclick="AddFilters()">Add filter</a>
</div>
</div>
<div class="row filter-edited" style="display:none;">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 filters">
<a class="btn btn-default">
<span class="text">Business</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class="text">Campaign</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Event</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Channel</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Name person</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
</div>
SASS CSS
.add-filters
{
.filter-added
{
span
{
margin-right: 5px;
}
span.glyphicon.glyphicon-remove
{
margin-left: 8px;
color: red;
&:hover
{
cursor: pointer;
color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}
}
a.btn.btn-default
{
min-width:100px;
padding: 3px 0px 0px 0px;
margin-left: 10px;
//delete the margin between the buttons on small devices
#media (max-width: 768px) {
margin-left: 0px;
}
&:first-of-type
{
margin-left: 0px;
}
&:hover
{
cursor:default;
background-color: #fff;
border-color: #ccc;
}
}
}
.filter-edited
{
margin-top: 20px;
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 7px;
/* Firefox 1-3.6 */
-moz-border-radius: 7px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 7px;
border: 1px solid #ddd;
span.glyphicon.glyphicon-plus
{
margin-left: 4px;
color: #15925f;
}
a.btn.btn-default
{
min-width:150px;
padding: 10px 5px 10px 0px;
margin-left: 5px;
//delete the margin between the buttons on small devices
#media (max-width: 768px) {
margin-left: 0px;
margin-top: 2px;
}
&:first-of-type
{
margin-left: 0px;
}
}
.filters {
padding: 15px;
}
}
}
You are listening only for events on currently shown elements. You need to call .on() function on parent element and pass child selector as a second parameter.
$(document).ready(function() {
$('.filter-added').on('click', '.removable', function() {
$(this).parent().remove();
});
});
$('.removable').on('click', function() {
$(this).parent().remove();
});
Should Be:
$(document).on('click', '.removable', function() {
$(this).parent().remove();
});
The reason behind this being, is that you are only applying this event to the current elements on the page. The markup below applies it to all elements of '.removable' that exist on the document. Current and future.
You could also run a .bind() on the object after it is created, and bind an event to it, but that would take more code and be less efficient.
Related
I'm using an input group to set up an input that allows users to type in a number or edit the number by pressing the plus and minus buttons. For some reason, I can't get them to display in my project. I copied the code to a test page and it displayed there. Also, the text input for the number isn't responding to the CSS that I have set for it as well. What is the issue with my input? I have provided the code below.
This shows up in the css for both buttons as well, but i'm not sure if it has to do with the issue:
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu)
<div class="input-group" id="changePrice${index}">
<span class="input-group-btn" id="minus${index}">
<button type="button" class="btn btn-default btn-number" data-type="minus" data-
field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" id="numberInput${index}" value="${index}"
min="0" max="200">
<span class="input-group-btn" id="plus${index}">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-
field="quant[1]">
<span class="glyphicon glyphicon-plus" id="plus${index}"></span>
</button>
</span>
</div>
.center {
margin: 40px auto;
display: none;
}
.center button:focus {
outline: 0 !important;
}
.center {
position: relative;
top: 50px;
margin: -181px 80px;
}
#numberInput{
width: 25px !important;
height: 23px;
border-radius: 8px;
border-color: #000000;
text-align: center;
}
I have been trying to create a bootstrap drop down box with some additional buttons inside. I have the main functionality sorted but the aesthetics are not quite right.
The issue I am having is that the Anchor elements are not filling the space up to the buttons on the right. I have tried experimenting with different combinations of block and inline-block which I have read elsewhere should fill the space but when it does it pushes the buttons down to the next line. When I do manage to get the buttons and anchor elements on the same line the selection area for the anchor does not extend the entire way up to the buttons.
I am currently tearing my hair out trying to get it to work but am having no luck so if anyone can offer any assistance it will be greatly appreciated.
Update:
Thanks to #Matus Jurika for suggesting using calc to adjust the sizing of the anchor element.
Updated working fiddle: fiddle
I sugget using calc for width:
.anchorDiv {
display: inline-block;
width: calc(100% - 74px);
}
Working Fiddle:
https://jsfiddle.net/q3fra0bm/36/
This here is snippet for your solution. I am just using bootstrap row class.
.comboRow {
margin-bottom: 3px;
}
.comboItem {
display: block !important;
/*width: 67%;*/
}
.comboButtons {
float:right;
margin-top: 3px;
width: 74px;
display: block;
}
.comboItemContainer {
width: 100%;
display: inline-block;
}
.anchorDiv {
display: inline-block;
}
.close {
/*float: right;*/
/*margin-right: 10px;*/
}
.close .edit {
margin-right: 5px;
}
#presetDropdownButton {
position:absolute;
}
.glyphicon {
font-size: 15px;
}
#presetDropdown {
width: max-content;
}
#newPresetEntry {
width: 50%;
height: 24px;
margin-left: 18px;
padding-left: 6px;
padding-right: 6px;
}
.dropdown-menu > li > div > div > a {
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
display: block;
}
.dropdown-menu > li > div > div > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.dropdown-menu > li > div > div > a:hover {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.pl-0 {
padding-left: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="dropdown" id="presetDropdownButton">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Presets
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="presetDropdown">
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 1</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 2 with longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 3 with even longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
</ul>
</div>
This should do the trick.
.comboItemContainer {
width: 100%;
position: relative;
}
.anchorDiv {
display: inline-block;
width: 100%;
padding: 0 80px 0 0;
}
.comboButtons {
width: 74px;
display: block;
position: absolute;
top: 0px;
right: 0px;
}
I made the container relative so that I can freely use absolute positioning on its children with a (0,0) origin relative to the container. Then I made the buttons absolute, made it top 0 and right 0. Added 100% width on the anchor and 80px padding-right.
This may look hacky but I'm not really that good in Flex and absolutely zero in Grid
This is almost certainly cross browser though
The button already has Javascript this is why I'm including it below - this code is separate to my question though. This is to change the button into something else ON CLICK - I want to keep the button hidden, until scroll... Looked all over and I'm unable to find the right way. (very new to JS).. and whenever I fiddle with the code it's breaking the JS which is why I'm seeking help.. it would be greatly appreciated.
$(document).ready(function() {
$("#mydiv").hide();
$("#show").click(function() {
$("#mydiv").toggle();
$("#show").toggle();
});
$("#hide").click(function() {
$("#mydiv").hide();
$("#show").show();
});
});
#mydiv {
position: fixed;
bottom: 0;
left: 0;
width: 360px;
}
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
}
.myheader {
background: #721a71;
color: #fff;
padding: 10px;
}
.mybody {
background: #f5f5f5;
padding: 10px;
}
<div class="btn btn-purple" id="show">
Get in touch <i class="fa fa-angle-up pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div id="mydiv">
<div class="myheader text-center">
Get in touch <i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div class="mybody">
<p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
<p class="d-none d-md-block">Email: <a class="external" href="#">example#example.co.uk</a></p>
<p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
</div>
</div>
You need to attach a scroll function to the window if you want to show your div on scroll Jquery Scroll. Then the easiest way if you are not that familiar with javascript is to just add a class and control everything else with css. So you can just do something like the following:
$(window).scroll(function(){
$('#show').addClass('scrolled', $(this).scrollTop() > 100);
});
This will add the class of scrolled when the window reaches 100px. If you want it to also remove the class when it goes back up instead of using addCLass you can just switch that to toggleClass and it will remove it as well.
So here it is:
$(document).ready(function() {
$("#mydiv").hide();
$("#show").click(function() {
$("#mydiv").toggle();
$("#show").toggle();
});
$("#hide").click(function() {
$("#mydiv").hide();
$("#show").show();
});
});
$(window).scroll(function(){
$('#show').addClass('scrolled', $(this).scrollTop() > 100);
});
body{
height:300vh;
}
#mydiv {
position: fixed;
bottom: 0;
left: 0;
width: 360px;
}
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
opacity:0;
transition:opacity 1000ms ease-in-out;
}
.btn-purple.scrolled{
opacity:1;
}
.myheader {
background: #721a71;
color: #fff;
padding: 10px;
}
.mybody {
background: #f5f5f5;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn btn-purple" id="show">
Get in touch <i class="fa fa-angle-up pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div id="mydiv">
<div class="myheader text-center">
Get in touch <i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true" style="color:#fff; font-weight:bolder; font-size:20px;"></i>
</div>
<div class="mybody">
<p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
<p class="d-none d-md-block">Email: <a class="external" href="#">example#example.co.uk</a></p>
<p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
</div>
</div>
If you dont want the transition effect you can instead just use the display property and remove opacity and transition from the css like so:
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
display:none;
}
.btn-purple.scrolled{
display:block;
}
Not 100 percent sure your requirement so I gave you something to start with. I added an element to measure on window scroll that will scroll (first .big) that when off screen a bit will trigger one event and when back on screen shows via another event trigger. I also put some style in the CSS that was in the markup. Note you probably only need one of the hide/show and just need the up/down class thing instead but I left that alone for you.
$(document).ready(function() {
$("#show").on('click', function() {
$("#mydiv").toggle(true);
$("#show").toggle(false);
});
$("#hide").on('click', function() {
$("#mydiv").toggle(false);
$("#show").toggle(true);
});
$(window).on('scroll', function() {
var t = document.getElementsByClassName("big")[0];
var tt = t.getBoundingClientRect().top;
if (tt < -100) { // as soon as its 100px off screen
setTimeout(function() {
$("#show").trigger('click');
}, 1000);
}
if (tt >= 0) { // as soon as its back on screen
setTimeout(function() {
$("#hide ").trigger('click');
}, 1000);
}
});
});
#mydiv {
position: fixed;
bottom: 0;
left: 0;
width: 360px;
display: none;
}
#show>i,
#hide>i {
color: #fff;
font-weight: bolder;
font-size: 20px;
}
.big {
height: 20em;
}
.btn-purple {
width: 360px;
background: #721a71;
color: #fff;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
}
.myheader {
background: #721a71;
color: #fff;
padding: 10px;
}
.mybody {
background: #f5f5f5;
padding: 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn btn-purple" id="show">
Get in touch S<i class="fa fa-angle-up pull-right" aria-hidden="true">^^^</i>
</div>
<div id="mydiv">
<div class="myheader text-center">
Get in touch H<i id="hide" class="fa fa-angle-down pull-right" aria-hidden="true">xxx</i>
</div>
<div class="mybody">
<p class="d-none d-md-block">Number: <a class="external" href="#">01522 123456</a></p>
<p class="d-none d-md-block">Email: <a class="external" href="#">example#example.co.uk</a></p>
<p class="d-none d-md-block">Bookings: <a class="external" href="#">booking.example.co.uk</a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Call <span class="fa fa-phone" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Email <span class="fa fa-envelope" aria-hidden="true"></span></a></p>
<p class="d-md-none"><a class="btn btn-primary btn-block mt-4 mb-4" href="#">Book <span class="fa fa-sign-in" aria-hidden="true"></span></a></p>
</div>
</div>
<div class='big'>make me scroll</div>
<div class='big'>(I just take up space)</div>
Why am I not able to use toggleClass('glyphicon-remove glyphicon-ok') in this snippet?
var Phase;
$(".btn-default").on("click", function(){
$(this).find('.glyphicon').toggleClass("glyphicon-remove glyphicon-ok");
});
label.btn {
margin-bottom: 0;
padding: 0;
overflow: hidden;
}
span {
display: block;
padding: 6px 12px;
}
input[type=checkbox] {
display: none;
}
input:checked + span {
display: block;
color: #fff;
background-color: #285e8e;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group">
<label class="btn btn-default"><input name="phase" type="checkbox" value="A"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> A</span></label>
<label class="btn btn-default"><input name="phase" type="checkbox" value="B"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> B</span></label>
<label class="btn btn-default"><input name="phase" type="checkbox" value="C"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> C</span></label>
</div>
</div>
This is because of synthetic* click done on input. In fact, click event is fired twice at label level.
One solution is to filter by event target:
var Phase;
$(".btn-default").on("click", function(e) {
if (!$(e.target).is('input')) return;
$(this).find('.glyphicon').toggleClass("glyphicon-remove glyphicon-ok");
});
label.btn {
margin-bottom: 0;
padding: 0;
overflow: hidden;
}
span {
display: block;
padding: 6px 12px;
}
input[type=checkbox] {
display: none;
}
input:checked+span {
display: block;
color: #fff;
background-color: #285e8e;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group">
<label class="btn btn-default"><input name="phase" type="checkbox" value="A"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> A</span></label>
<label class="btn btn-default"><input name="phase" type="checkbox" value="B"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> B</span></label>
<label class="btn btn-default"><input name="phase" type="checkbox" value="C"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> C</span></label>
</div>
</div>
*note: See spec
When a user agent is to run synthetic click activation steps on an
element, the user agent must run pre-click activation steps on the
element, then fire a click event at the element. The default action of
this click event must be to run post-click activation steps on the
element. If the event is canceled, the user agent must run canceled
activation steps on the element instead.
I have following markup:
<div class="row">
<div class="col-xs-6">
<label class="labelTextFormat">Tags</label>
<button><span class="glyphicon glyphicon-edit" style=""></span></button>
<button><span class="glyphicon glyphicon-plus" style=""></span></button>
</div>
</div>
Which gives me following output:
I want to display them next to Label. How should I do that?
Codepen Demo
Your label is 100% wide
Remove that
.labelTextFormat {
font-weight: normal;
font-size: 18px;
color: #a1ebff;
padding-top: 6px;
float: left;
}
.labelTextFormat {
font-weight: normal;
font-size: 18px;
color: #a1ebff;
padding-top: 6px;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-6">
<label class="labelTextFormat">Tags</label>
<button><span class="glyphicon glyphicon-edit" style=""></span></button>
<button><span class="glyphicon glyphicon-plus" style=""></span></button>
</div>
</div>
<button class="btn btn-success" data-toggle="modal" data-target="#myModalNorm" type="button">
<i class="glyphicon glyphicon-plus"></i>Tags</button>