I have a link which adds a <tr>
dynamically with JQuery, but my <tr>
contains some <td>
which contains JQuery (the first one is a datepicker and the last one removes the current <tr>
). And when I add this <tr>
the JQuery and it's CSS doesn't work:\
Here's a Screenshot (the last
<tr>
is the<tr>
which is added dynamically):Here's the jquery code of adding dynamically:
<script>
$('.AddResults').click(function(){
// All the cols
var jourVar = $('<td class="jr_td"><p><input type="text" class="datepicker" /></p><p class="ou">ou</p><p><input type="text" class="datepicker" /></p></td>') ;
var creneauVar = $('<td class="cr_td"><select><option value="h1">10h30</option><option value="h2">11h30</option></select><select class="cr_td_s2"><option value="h3">10h30</option><option value="h4">11h30</option></select></td>') ;
var repassageVar = $('<td class="rp_td"><select><option value="h5" SELECTED>2h00</option><option value="h6">3h00</option></select></td>') ;
var menageVar = $('<td class="mn_td"><select><option value="h7" SELECTED>2h00</option><option value="h8">3h00</option></select></td>') ;
var totalVar = $('<td class="tt_td"><strong>4h.</strong></td>') ;
var pttcVar = $('<td class="pttc_td"><strong>88 €</strong></td>') ;
var corVar = $('<td class="cor_td"><a href="#"><img src="img/ico/corbeille.png" alt="" width="13" height="13" /></a></td>') ;
//Create 2 new rows
var newTitreRow = $('<tr><td class="bar_td" colspan=7><strong>PRESTATION ' + rowNumber + '</strong></td></tr>') ;
var newContentRow = $('<tr class="ligne_suppr">').append(jourVar).append(creneauVar).append(repassageVar).append(menageVar).append(totalVar).append(pttcVar).append(corVar).append('<\/tr>') ;
//Append the new row to the body of the #table_prest table
$('#table_prest tbody').append(newTitreRow);
$('#table_prest tbody').append(newContentRow);
$('<style type="text/css">@import url("' + myStylesLocation + '")</style>').appendTo("#table_prest tbody");
//Iterate row number
rowNumber++;
});
</script>
And here's the datepicker code:
<script>
$(function() {
$( ".datepicker" ).datepicker({
showOn: "button",
buttonImage: "img/ico/jour_presta.png",
buttonImageOnly: true
});
});
</script>
And Here's the deleting code:
<script>
$('.ligne_suppr a').click(function(e) {
e.preventDefault();
var parent = $(this).parent().parent(); // parent <tr> of the anchor tag
var previous = parent.prev(); // <tr> before the parent <tr>
parent.remove();
previous.remove();
rowNumber -- ;
});
</script>
Do you have any Idea about this problem? Thank you:-)
You need to undestand that datepicker is not just CSS. It is a jQuery UI plugin that adds both functionality and new DOM elements..
So the problem in your case is not with CSS not getting applied, but with the jQuery functionality not being applied to the dynamically created elements.
You need to re-run the datepicker code for the new elements..
So
Datepicker code
function applyDatepicker(context){
context = context || document;
$( ".datepicker", context ).datepicker({
showOn: "button",
buttonImage: "img/ico/jour_presta.png",
buttonImageOnly: true
});
}
$(function() {
applyDatepicker();
});
Deleting code
$('#table_prest').on('click','.ligne_suppr a',function(e) {
e.preventDefault();
var parent = $(this).parent().parent(); // parent <tr> of the anchor tag
var previous = parent.prev(); // <tr> before the parent <tr>
parent.remove();
previous.remove();
rowNumber-- ;
});
jQuery for adding dynamically code
$('.AddResults').click(function(){
// All the cols
var jourVar = $('<td class="jr_td"><p><input type="text" class="datepicker" /></p><p class="ou">ou</p><p><input type="text" class="datepicker" /></p></td>') ;
var creneauVar = $('<td class="cr_td"><select><option value="h1">10h30</option><option value="h2">11h30</option></select><select class="cr_td_s2"><option value="h3">10h30</option><option value="h4">11h30</option></select></td>') ;
var repassageVar = $('<td class="rp_td"><select><option value="h5" SELECTED>2h00</option><option value="h6">3h00</option></select></td>') ;
var menageVar = $('<td class="mn_td"><select><option value="h7" SELECTED>2h00</option><option value="h8">3h00</option></select></td>') ;
var totalVar = $('<td class="tt_td"><strong>4h.</strong></td>') ;
var pttcVar = $('<td class="pttc_td"><strong>88 €</strong></td>') ;
var corVar = $('<td class="cor_td"><a href="#"><img src="img/ico/corbeille.png" alt="" width="13" height="13" /></a></td>') ;
//Create 2 new rows
var newTitreRow = $('<tr><td class="bar_td" colspan=7><strong>PRESTATION ' + rowNumber + '</strong></td></tr>') ;
var newContentRow = $('<tr class="ligne_suppr">').append(jourVar).append(creneauVar).append(repassageVar).append(menageVar).append(totalVar).append(pttcVar).append(corVar).append('<\/tr>') ;
//Append the new row to the body of the #table_prest table
$('#table_prest tbody').append(newTitreRow);
$('#table_prest tbody').append(newContentRow);
applyDatepicker(newContentRow); // ADDED THIS LINE
// removed line that re-added stylesheet.. not needed
//Iterate row number
rowNumber++;
});
Use .on()
to bind event to dynamically added elements.
for copy in jquery, use:
$('#div-you-can-copy-it').clone().insertAfter('#last-div');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.