jQueryがドキュメントに追加した後に機能しない

Question

こんにちは私は現在WordPressのCMSを使用していますが、現在はカスタムテンプレートを開発中です。私の問題は、jQueryがjsonからデータを受け取って文書に追加した後に動作しないことです。

私のコードは以下の通りです。

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>

そして、私の追記機能。

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); 
 
}

私は、イベントが、イマイチの作業を委任することを試みました。この問題を解決するにはどうすればよいですか？

Answer 1

create_new_packet関数では、出力htmlを追加するために 'jQuery'を使用します。 add_cover関数では、ほとんどのjQuery関数で '$'を使用します。 Wordpressでは、jQueryコードでは '$'ではなく 'jQuery'文字列を使用する必要があります。すべてのドル記号を 'jQuery'に置き換えてみてください。 https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/：あなたは、このリンクをチェックアウトしてください「$」記号を使用したい場合は

だから$('.table-insurance-covers')はjQuery('.table-insurance-covers')

になります。