在文档上追加后jQuery无法正常工作

Question

Hello I'm using wordpress CMS and I'm currently developing a custom template. My problem is that the jQuery isnt working after receive data from json and append them to the document.

My code is below.

 function add_cover( button_class, event_type ){ $( '.table-insurance-covers' ).on( event_type, '.add-cover', function(){ console.log("HAS COVER : "); console.log($(this).data( "custom-value" )); if($(this).data( "custom-value" ) == 0 ){ //Change the text $(this).text( "Αφαίρεση" ); //Change button effect $(this).removeClass( "btn-success" ); $(this).addClass( "btn-danger" ); //Change the custom value $(this).data( "custom-value", 1 ); //Change the price, packet price + extra cover = result var packet_price = $(this).closest('span.packet-price').text(); console.log(packet_price); }else{ //Change the text $(this).text( "Προσθήκη" ); //Change button effect $(this).removeClass( "btn-danger" ); $(this).addClass( "btn-success" ); //Change the custom value $(this).data( "custom-value", 0 ); } }); } 

 <table class="table table-bordered table-striped table-insurance-covers"> <thead> <tr> <th>Τύπος</th> <th>Όνομα Κάλυψης</th> <th>Ποσό</th> <th>Προσθήκη / Αφαίρεση</th> </tr> </thead> <tbody> <tr> <td class="text-center"><i class="fa fa-truck"></i></td> <td>Οδική Βοήθεια</td> <td>&euro; <span class="cover-price"> 17 </span></td> <td class="text-center"><a class="btn btn-success btn-sm add-cover" href="javascript:void(0)" data-custom-value="0">Προσθήκη</a></td> </tr> <tr> <td class="text-center"><i class="fa fa-truck"></i></td> <td>Θραύση Κρυστάλλων</td> <td>&euro; <span class="cover-price"> 29 </span></td> <td class="text-center"><a class="btn btn-success btn-sm add-cover" href="javascript:void(0)" data-custom-value="0">Προσθήκη</a></td> </tr> <tr> <td class="text-center"><i class="fa fa-truck"></i></td> <td>Μερική Κλοπή</td> <td>&euro; <span class="cover-price"> 65 </span></td> <td class="text-center"><a class="btn btn-success btn-sm add-cover" href="javascript:void(0)" data-custom-value="0">Προσθήκη</a></td> </tr> <tr> <td class="text-center"><i class="fa fa-truck"></i></td> <td>Ολική Κλοπή</td> <td>&euro; <span class="cover-price"> 78 </span></td> <td class="text-center"><a class="btn btn-success btn-sm add-cover" href="javascript:void(0)" data-custom-value="0">Προσθήκη</a></td> </tr> </tbody> </table> 

And my append function.

 function create_new_packet( company_name, covers, packet_name, packet_price, extra_covers ){ //TO DO LIST, take data in covers variable from json covers = '<li rel="tooltip" data-placement="top" title="Αστική Ευθύνη Έναντι Τρίτων"><i class="fa fa-male"></i><span class="booking-item-feature-sign"></span></li><li rel="tooltip" data-placement="top" title="Θραύση κρυστάλλων σε Α κίνδυνο έως 1.000€"><i class="im im-car-window"></i><span class="booking-item-feature-sign"></span></li><li rel="tooltip" data-placement="top" title="Οδική Βοήθεια"><i class="fa fa-truck"></i><span class="booking-item-feature-sign"></span></li>'; var output_html = '<li class="booking-item"><span><div class="row"><div class="col-md-3"><div class="booking-item-car-img"><img src="http://www.eurolinksa.gr/wp-content/uploads/eisllogogoogle.jpg" alt="Image Alternative text" title="Image Title"/></div></div><div class="col-md-6"><small>Καλύψεις πακέτου</small><ul class="booking-item-features booking-item-features-sign insurance-covers clearfix"><li rel="tooltip" data-placement="top" title="Αστική Ευθύνη Έναντι Τρίτων"><i class="fa fa-male"></i><span class="booking-item-feature-sign"></span></li><li rel="tooltip" data-placement="top" title="Θραύση κρυστάλλων σε Α κίνδυνο έως 1.000€"><i class="im im-car-window"></i><span class="booking-item-feature-sign"></span></li><li rel="tooltip" data-placement="top" title="Οδική Βοήθεια"><i class="fa fa-truck"></i><span class="booking-item-feature-sign"></span></li></ul></div><div class="col-md-3 text-center"><span class="booking-item-price packet-price">&euro; ' + packet_price + '</span><span></span><p class="booking-item-flight-class">' + packet_name + '</p><span class="btn btn-primary w100pc">Αγορά</span></div></div></span><div class="row" class="mr0 ml0"><div class="panel-group" id="accordion-' + packet_name + '"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a style="text-decoration: none;" data-toggle="collapse" data-parent="#accordion-' + packet_name + '" href="#' + packet_name + '"><span class="ml20">Πρόσθεσε Καλύψεις</span></a></h4></div><div class="panel-collapse collapse" id="' + packet_name + '"><div class="panel-body"><table class="table table-bordered table-striped table-insurance-covers"><thead><tr><th>Τύπος</th><th>Όνομα Κάλυψης</th><th>Ποσό</th><th>Προσθήκη / Αφαίρεση</th></tr></thead><tbody>' + extra_covers + '</tbody></table></div></div></div></div></div></li>'; jQuery('.insurance-results-list').append(output_html); } 

I have tried to delegate the event, but isnt working. How can I fix this problem?

Answer 1

In the create_new_packet function, you use 'jQuery' to append the output html. In the add_cover function you use '$' with most of your jQuery functions. Wordpress requires that jQuery code uses the 'jQuery' string rather than '$'. Try replacing all of your dollar signs with 'jQuery'.

So $( '.table-insurance-covers' ) becomes jQuery( '.table-insurance-covers' )

If you would like to use the '$' sign please checkout this link: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/ .