I need to build notes app like site and I have to delete specific div with a click on x icon.
I think that i need to delete a object from the array with splice function, but I can't delete a specific object from it.
var notesArr = []
function objToArr() {
noteObj = {
text: textAreaDv.value,
date: dateInput.value,
time: timeInput.value,
}
notesArr.push(noteObj)
// console.log(notesArr)
printTohtml()
}
function printTohtml() {
var str = ""
for (i = 0; i < notesArr.length; i++) {
str += '<div class="col-3 noteDv id="noteDvid">'
str += '<i class="fa fa-times-circle icon" aria-hidden="true" onclick="remove()"></i>'
str += '<div class="textBox">'
str += '<div class="textDv">' + notesArr[i].text + '</div>'
str += '<div class="timeDV">' + notesArr[i].date + '</div>'
str += '<div class="dateDv">' + notesArr[i].time + '</div>'
str += '</div>'
str += '</div>'
}
noteId.innerHTML = str
}
function remove() {
notesArr.splice(0)
}
<div class="container">
<div class="row mt-5">
<div class="col-2"></div>
<div class="form-group col-8">
<label for="exampleFormControlTextarea1" id="textAreaTitle">To Do list</label>
<textarea class="form-control textAreaDv" id="textAreaDv" rows="6"></textarea>
</div>
</div>
<div class="row buttonRow">
<div class="col-8 offset-2">
<div class="row pl-5">
<button type="button" class="btn btn-light col-2 buttons" onclick="objToArr()">Send</button>
<button type="button" class="btn btn-light col-2 buttons aniButton" id="button">Clear</button>
<input id="dateInput" type="date" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
<input id="timeInput" type="time" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
</div>
</div>
<div class="row" id="noteId">
<div class="col-3 noteDv" id="noteDvid">
<i class="fa fa-times-circle icon" aria-hidden="true"></i>
<div class="textBox">
<div class="textDv">text</div>
<div class="timeDV">time</div>
<div class="dateDv">date</div>
</div>
</div>
</div>
</div>
You cannot reuse the ID, use the class instead
You likely want to do noteId.innerHTML += str to concatenate
remove onclick="remove()" from <i class="fa fa-times-circle icon" aria-hidden="true"></i> and add a class of remove to that <i>
add the index as an attribute
str += '<i class="fa fa-times-circle icon remove" aria-hidden="true" data-idx="'+i+'"></i>'
// a click in the output div
document.getElementById("noteId").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("remove")) { // it was the remove that was clicked
notesArr.splice(tgt.dataset.idx,1); // take it IDX and remove the item
printTohtml(); // re-render
}
})
var notesArr = []
function objToArr() {
noteObj = {
text: textAreaDv.value,
date: dateInput.value,
time: timeInput.value,
}
notesArr.push(noteObj)
// console.log(notesArr)
printTohtml()
}
function printTohtml() {
var str = ""
for (i = 0; i < notesArr.length; i++) {
str += '<div class="col-3 noteDv">'
str += '<i class="fa fa-times-circle icon remove" aria-hidden="true" data-idx="'+i+'"></i>'
str += '<div class="textBox">'
str += '<div class="textDv">' + notesArr[i].text + '</div>'
str += '<div class="timeDV">' + notesArr[i].date + '</div>'
str += '<div class="dateDv">' + notesArr[i].time + '</div>'
str += '</div>'
str += '</div>'
}
noteId.innerHTML = str;
}
document.getElementById("noteId").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("remove")) {
notesArr.splice(tgt.dataset.idx,1);
printTohtml()
}
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="row mt-5">
<div class="col-2"></div>
<div class="form-group col-8">
<label for="exampleFormControlTextarea1" id="textAreaTitle">To Do list</label>
<textarea class="form-control textAreaDv" id="textAreaDv" rows="6"></textarea>
</div>
</div>
<div class="row buttonRow">
<div class="col-8 offset-2">
<div class="row pl-5">
<button type="button" class="btn btn-light col-2 buttons" onclick="objToArr()">Send</button>
<button type="button" class="btn btn-light col-2 buttons aniButton" id="button">Clear</button>
<input id="dateInput" type="date" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
<input id="timeInput" type="time" class="form-control col-2 btn-light buttons" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
</div>
</div>
<div class="row" id="noteId"></div>
</div>
PS: If you want to delete the div instead of rewriting, you can do
document.getElementById("noteId").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("remove")) { // it was the remove that was clicked
this.closest(".noteDv").remove()
}
})
If you simply want to remove element from screen without ordering rest remaining elements in a view - then most easy way is to use node.removeChild(child) method :
<div id="container">
<h3>Click on a link to remove it !</h3>
<a href='#' onclick='this.parentNode.removeChild(this);'>Hot summer</a><br>
<a href='#' onclick='this.parentNode.removeChild(this);'>Pretty Autumn</a><br>
<a href='#' onclick='this.parentNode.removeChild(this);'>Cold winter</a>
</div>
Related
I have this code:
<div class="container">
<div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form3">Title</label>
<input type="text" id="form3" class="form-control validate val1" name="val1">
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form2">Desc</label>
<input type="email" id="form2" class="form-control validate val2" name="val2">
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form2">
Coordinates click:
<div class="coorX"></div>
x
<div class="coorY"></div>
</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-indigo saveBtn">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="scalize imgpo">
<img src="img/jacket.png" alt="" class="target ">
<div class="item-point" data-top="130" data-left="300" id="point1">
<div></div>
</div>
<div class="item-point" data-top="180" data-left="462" id="point2">
<div></div>
</div>
<div class="item-point" data-top="380" data-left="215" id="point3">
<div></div>
</div>
<div class="item-point" data-left="357" data-top="458" id="point4">
<div></div>
</div>
</div>
</div>
<form name="saveForm" action="#" method="post" style="margin-left: 15px">
<div class="itemsBox" >
<div class="obiect1">Obiect 1 <div class="removeMe" id="1">X</div> </div>
<div class="obiect2">Obiect 2 <div class="removeMe" id="2">X</div> </div>
<div class="obiect3">Obiect 3 <div class="removeMe" id="3">X</div> </div>
<div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div>
</div>
<input type="submit" value="Save" />
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('.imgpo').click(function(e) {
var posX = $(this).position().left,posY = $(this).position().top;
$('.coorX').html((e.pageX - posX -10));
$('.coorY').html((e.pageY - posY -10));
$(".tooltip").tooltip("hide");
$('.formAdd').click();
});
$(document).on("click", ".removeMe", function() {
var number = $(this).attr('id');
$('#point' + number).remove();
$('.obiect' + number).remove();
});
$('.saveBtn').click(function(e) {
e.preventDefault();
var val1 = $(".val1").val(); // title
var val2 = $(".val2").val(); // description
var cX = $(".coorX").text();
var cY = $(".coorY").text();
var newPoint = "<div class='item-point' data-top='"+cY+"' data-left='"+cX+"' id='point1'>" +
"<div>" +
"<a href='#' class='toggle tooltips' title='<h1><b>"+val1+"</b><br>"+val2+"</h1>' data-placement='top' data-html='true' rel='tooltip'></a>" +
"</div>" +
"</div>";
var nextObjNumber = $(".itemsBox").children("div").length + 1;
var newObject = "<div class='obiect" + nextObjNumber + "'>Obiect " + nextObjNumber +
"<div class='removeMe' id='"+nextObjNumber+"'>X</div>" +
"</div>";
$(".scalize").append(newPoint); // inserting new point
$(".itemsBox").append(newObject); // inserting new object
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => { ev.stopPropagation(); });
$("#modalSubscriptionForm").modal("hide");
$(".val1").val("");
$(".val2").val("");
alert('Add!');
});
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => { ev.stopPropagation(); });
});
</script>
I have a problem with deleting some elements. After clicking anywhere on the jacket's photo, a form will pop up adding a new point in the picture (where you click). Under the photo I have a list of point names from "X" which causes deleting points from the image. This works fine, but only for elements added at page startup (when the website is refreshed).
I have a problem with the newly added points in the image. They are deleting from the list below the picture. Points do not delete from the picture.
How to fix it?
Prview: http://serwer1356363.home.pl/pub/component/index2.html
When you're creating your new point, you have var newPoint = "<div class='item-point' data-top='" + cY + "' data-left='" + cX + "' id='point1'>" +. The id is being set to 'point1' for every new point added. If you update that to set the id dynamically to match the id of the remove button that you're creating, it should work as expected.
I have this code below to create a loop of div using javascript. It's working fine on looping the div that I wanted. But the problem is the alignment of the div. Its in alternate position. What I want to accomplish here is to have my design div to be aligned.
Expected Output
First Div | Second Div <<-- First Loop
First DIv | Second Div <<-- Second Loop
Current Design in my code
| First DIv
First Div |
function isOdd(n) {
var IsOdd = false;
if (Math.abs(n % 2) == 1) {
IsOdd = true;
}
return IsOdd;
}
$("#click").click(function(e) {
e.preventDefault();
var odd = [1, 3, 5, 7, 9];
var even = [2, 4, 6, 8, 10];
var counter = 0;
var FireCounter = [1, 2, 3]
for (var i = 0; i < FireCounter.length; i++) {
var ArchPlanDetails = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).find(".req");
var cardTitle = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).parent().find(".card-title")[0]; //.innerText;
console.log(cardTitle);
var dividedAlertPlanDetails = FireCounter.length / 2;
var mainCard = "";
mainCard = '<div class="row">' +
'<div class="col-md-6" id="divBody_' + i + '">' +
'</div>' +
'<div class="col-md-6" id="divBody2_' + i + '">' +
'</div>' +
'</div>';
$("#modalAlert .modal-body").append(mainCard);
var fieldSet = '<fieldset class="border p-2 mt-2">' +
'<legend style="color:black !important; font-size:30px !important">' + cardTitle + '</legend>' +
'<div id="fieldDivID' + i + '"></div>' +
'<fieldset>';
//var cards = '<div class="card" id="HelloWorld_' + i + '"> <div class="card-header bg-success"><h3 class="card-title">' + cardTitle + ' </h3 ></div> <div class="card-body"> </div>'
if (isOdd(i)) {
$("#modalAlert .modal-body #divBody_" + i).append(fieldSet);
} else {
$("#modalAlert .modal-body #divBody2_" + i).append(fieldSet);
}
counter++;
$.each(ArchPlanDetails, function(Index, Value) {
var appendBody = "";
var id = "#fieldDivID" + i;
var divID = "#divBody_" + i;
var divID2 = "#divBody2_" + i;
var textboxValue = $(Value).find("input[type=text],[type=number]").val();
var InnerText = Value.innerText.trim();
appendBody = '<div class="row mt-2" style="font-size:20px">' +
'<div class="col-md-12"> ' + InnerText + ' </div >' +
'</div >';
if (textboxValue == "") {
if (isOdd(i)) {
$(divID + " " + id).append(appendBody);
} else {
$(divID2 + " " + id).append(appendBody);
}
}
});
}
$("#modalAlert .modal-header").html("Header");
$("#modalAlert").modal("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form id="frmPlanDetails">
<div class="col-md-12 divHide" id="dvFireCounter1">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter1"></span> Plan A
<a class="fa fa-window-minimize float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse1" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="Fire" name="FireIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="Fire">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse1" class="collapse show pt-3 pl-4 pr-4" data-parent="#accordion">
<fieldset class="border p-2">
<div class="row">
<div class="col-md-6 req">
Ave. Cover(mm)
<input type="text" class="form-control flat" name="FireAveCover" id="" placeholder="25">
</div>
<div class="col-md-6 req">
Overall Depth(mm)
<input type="text" class="form-control flat" name="FireOverAll" id="" placeholder="150">
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="col-md-12 divHide" id="dvFireCounter2">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter2"></span> Plan B
<a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse2" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="BP" name="BPIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="BP">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse2" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
B
</div>
</div>
</div>
<div class="col-md-12 divHide" id="dvFireCounter3">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter3"></span> Plan C
<a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse3" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="AS" name="ASIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="AS">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse3" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
C
</div>
</div>
</div>
<button id="click">Click</button>
</form>
<div class="modal fade" id="modalAlert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header bg-success">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
</div>
</div>
<!-- Modal footer -->
</div>
</div>
</div>
jsFiddle
I just created a card-form(bootstrap) and in the form,
there are a plus icon and hidden contents(id=mycontent_1 with display: none). what I'm trying to do is listed as follows.
I tried to do the first one on my java-script but it's not working.
when I click plus icon, my function(toggler) should be executed and the icon would be hidden and my contents(text boxes and delete button) have to be visible.
similarly in opposite direction, when I click the delete button, my
contents(text boxes and a delete button) have to be invisible and the
plus icon should be visible.
need your kind helps for my two functions.
here are my codes for jsfiddle.
https://jsfiddle.net/Sanchez/aq9Laaew/219304/
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="cardHeader1" style="visibility: hidden;"> no name </div>
<div class="card-body">
<a href="#" class="btn btn-info btn-lg" onclick="toggler('myContent_1');">
<span class="glyphicon glyphicon-plus" id=icon1 onclick="toggler('myContent_1');"></span> Plus
</a>
<div id="myContent_1" class="card-title" style="display: none;" >
<form action="" method="post">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Number</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Title</span>
</div>
<input type="text" id="title_1" name="title" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-tumblr"></i>
</span>
</div>
</div>
</div>
<div class="form-group form-actions">
<button type="button" id="delBtn_1" class="btn btn-danger">Delete</button>
</div>
</form>
</div>
</div>
</div>
</div>
function toggler(divId){
var tempId = divId.slice(-1);
var x = document.getElementById("icon" + tempId);
var y = document.getElementById("cardHeader" + tempId);
x.style.display = "none";
y.style.visibility = "visible";
$("#delBtn_" + tempId).show();
$("#" + divId).toggle();
}
To begin with you should place you js code on the head before the body.
Afterwards, replace the a tag with button
Finally call toggler function on delete button's onclick
<script>
function hidePlusBtn() {
$("#plusBtn").hide();
}
function toggler(divId) {
var tempId = divId.slice(-1);
var x = document.getElementById("icon" + tempId);
var y = document.getElementById("cardHeader" + tempId);
x.style.display = "none";
y.style.visibility = "visible";
$("#delBtn_" + tempId).show();
$("#" + divId).toggle();
}
</script>
<div class="col-sm-6">
...
<button
id="plusBtn"
class="btn btn-info btn-lg"
onclick="toggler('myContent_1');">
<span
class="glyphicon glyphicon-plus"
id=icon1
onclick="toggler('myContent_1');">
</span> Plus
</button>
...
<button
type="button"
id="delBtn_1"
class="btn btn-danger"
onclick="toggler('myContent_1'); hidePlusBtn()">Delete
</button>
...
</div>
Updated Demo: https://jsfiddle.net/1s390orm/
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
i am trying to create Bootstrap Panel dynamically by on click function but every Panel should create multiple forms by on click function.. In my code the first Panel create forms by clicking on button but the rest of panels doesn't create forms..
var counter=1;
$(".panel-increment").on("click", function(e){
e.preventDefault();
var panelHtml = '<div class="panel panel-info"> ' +
'<div class="panel-heading"> ' +
'<h4 class="panel-title"> ' +
'<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + (counter + 1) + '">Day ' + (counter + 1) + '<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>' +
'</div> ' +
'<div id="collapse' + (counter + 1) + '" class="panel-collapse collapse"> ' +
'<div class="panel-body">' +
'<div class="row" > ' +
'<div class="col-md-12 sch-box">' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div> ' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div> ' +
'<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div> ' +
'<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div> ' +
'</div> ' +
'</div> ' +
'</div> ' +
'<button type="button" class="btn center-block panel-addbtn" ><i class="fa fa-plus"></i> </button> ' +
'</div> ' +
'</div>';
$(this).closest(".it-right-side").find(".panel-group").append(panelHtml);
counter++;
});
$(".panel-addbtn").on("click", function(e){
e.preventDefault();
var formHtml = '<div class="row" >' +
'<div class="col-md-12 sch-box"> ' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div>' +
'<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div>' +
'<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div>' +
'<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div>' +
'</div>' +
'</div>';
$(this).closest(".panel-collapse").find(".panel-body").append(formHtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 it-right-side">
<div>
<div class="col-md-12" id="dynamicInput">
<!--Start Panel-->
<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Day 1
<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body" id="formcreation">
<!--Schedule-->
<div class="row" >
<div class="col-md-12 sch-box">
<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div>
<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div>
<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div>
<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div>
</div>
</div>
</div>
<button type="button" class="btn center-block panel-addbtn" ><i class="fa fa-plus"></i> </button>
</div>
</div>
</div>
</div>
<!--End panel-->
</div>
<button type="button" class="btn center-block panel-increment"><i class="fa fa-plus"></i> </button>
</div>
This is because:
$("selector").on("click", function(){
});
works for static html, in case of dynamic html use .on() like:
$("document").on("click", ".panel-addbtn", function() {
});
You can try defining an onclick event in the dynamic html like
<div onclick="myFunction()">
</div>
now you can create a javascript function and it would always work now matter the html is static or dynamic
function myFunction(){
//do something
}
This is the code about in my template file
<ul class="playListForm" id="playList" style="list-style: none;">
#foreach($listSong as $song)
<!--<?php
$url = URL::route("listentomusic",$song->id_song."**".$song->title."**".$song->artist."**".$song->code128."**".$song->code320);
$urlup = URL::route("voteup", $song->id_song);
$urldown = URL::route("votedown", $song->id_song);
?>-->
<?php
$urlsource = 'http://api.mp3.zing.vn/api/mobile/source/song/'.$song->code128;
if($song->position == 1){
?>
<li id="{{$song->position}}" class="active">
<div class="form-inline plItem">
<div class="form-group plNum">{{$song->position}}</div>
<a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div>
</a>
<div class="form-group">
<div class="form-inline">
<p style="display:none" id="songId">{{$song->id_song}}</p>
<button id="upBtn" class="form-group btn btn-default btnUp" style="visibility: hidden;">
Up
</button>
<button id="dwnBtn" class="form-group btn btn-default btnDown">
Down
</button>
</div>
</div>
<hr style="margin-top: 9px">
</div>
</li>
<?php
}
else{
if($song->position != count($listSong)){
?>
<li id="{{$song->position}}">
<div class="form-inline plItem">
<div class="form-group plNum">{{$song->position}}</div>
<a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div></a>
<div class="form-group">
<div class="form-inline">
<p style="display:none" id="songId">{{$song->id_song}}</p>
<button id="upBtn" class="form-group btn btn-default btnUp">
Up
</button>
<button id="dwnBtn" class="form-group btn btn-default btnDown">
Down
</button>
</div>
</div>
<hr style="margin-top: 10px">
</div>
</li>
<?php
}
else{
?>
<li id="{{$song->position}}">
<div class="form-inline plItem">
<div class="form-group plNum">{{$song->position}}</div>
<a id="songURL" href="{{$urlsource}}"><div id="songInfo" class="form-group plTitle" value="{{$song->title}} - {{$song->artist}}">{{$song->title}} - {{$song->artist}}</div></a>
<div class="form-group">
<div class="form-inline">
<p style="display:none" id="songId">{{$song->id_song}}</p>
<button id="upBtn" class="form-group btn btn-default btnUp">
Up
</button>
<button id="dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">
Down
</button>
</div>
</div>
<hr style="margin-top: 10px">
</div>
</li>
<?php
}
}
?>
#endforeach
</ul>
And I tried to append new "li" by this JQuery code:
var newLI = '<li id="'+lastPos+'">'+
'<div class="form-inline plItem">'+
'<div class="form-group plNum">'+lastPos+'</div>'+
'<a id="songURL" href="'+'http://api.mp3.zing.vn/api/mobile/source/song/'+song['code128']+'"><div id="songInfo" class="form-group plTitle" value="'+song['title']+' - '+song['artist']+'">'+song['title']+' - '+song['artist']+'</div></a>'+
'<div class="form-group">'+
'<div class="form-inline">'+
'<p style="display:none" id="songId">'+song['id_song']+'</p>'+
'<button id="upBtn" class="form-group btn btn-default btnUp">'+
'Up'+
'</button>'+
'<button id="dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">'+
'Down'+
'</button>'+
'</div>'+
'</div>'+
'<hr style="margin-top: 10px">'+
'</div>'+
'</li>';
$('#playList').append(''+newLI+'');
And here is the result:
So I have a problem about the new li at the last which I added by JQuery. I really don't know why. I hope you could give me some advices. Thank you.
P/S: Sorry for my bad English.
Same id maybe confused, generate with function
function generate(lastPos){
var newLI = '<li id="'+lastPos+'">'+
'<div class="form-inline plItem">'+
'<div class="form-group plNum">'+lastPos+'</div>'+
'<a id="songURL" href="'+'http://api.mp3.zing.vn/api/mobile/source/song/'+song['code128']+'"><div id="songInfo" class="form-group plTitle" value="'+song['title']+' - '+song['artist']+'">'+song['title']+' - '+song['artist']+'</div></a>'+
'<div class="form-group">'+
'<div class="form-inline">'+
'<p style="display:none" id="songId">'+song['id_song']+'</p>'+
'<button id="'+lastPos+'_upBtn" class="form-group btn btn-default btnUp">'+
'Up'+
'</button>'+
'<button id="'+lastPos+'_dwnBtn" class="form-group btn btn-default btnDown" style="visibility: hidden;">'+
'Down'+
'</button>'+
'</div>'+
'</div>'+
'<hr style="margin-top: 10px">'+
'</div>'+
'</li>';
$('#playList').append(''+newLI+'');
}
call function and new id for LI Element.