In my fiddle I have a simple bootstrap nav tab group in which the tabs do 2 things:
- Display the corresponding tab pane
- Change the value of an input to that defined by the tab anchor's
data-payment_methodattribute.
Here is the code:
<ul class="payment_methods methods nav nav-pills">
<li class="payment_method_bacs active"> <a href="#payment_method_bacs_desc" data-toggle="pill" data-payment_method='bacs' class='payment_method_choose'>Direct Bank Transfer </a>
</li>
<li class="payment_method_cheque "> <a href="#payment_method_cheque_desc" data-toggle="pill" data-payment_method='cheque' class='payment_method_choose'>Cheque Payment </a>
</li>
<li class="payment_method_paypal "> <a href="#payment_method_paypal_desc" data-toggle="pill" data-payment_method='paypal' class='payment_method_choose'>PayPal <i class = 'fa fa-credit-card'></i></a>
</li>
</ul>
And the panes and the input:
<input type="text" name="payment_method" id="payment_method" value="bacs">
<div class="panel panel-default top-buffer">
<div class="tab-content panel-body">
<div class="tab-pane fade active in" id="payment_method_bacs_desc">
<p>Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won't be shipped until the funds have cleared in our account.</p>
</div>
<div class="tab-pane fade " id="payment_method_cheque_desc">
<p>Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</p>
</div>
<div class="tab-pane fade " id="payment_method_paypal_desc">
<p>Pay via PayPal; you can pay with your credit card if you don't have a PayPal account</p>
</div>
</div>
</div>
When I copy/paste my code into jsFiddle it works fine but I'm having trouble in my WordPress site (running WooCommerce), loading the standard scripts associated with both (too much to post here!).
The nav tabs work fine and the tab panes switch without issue. But my own jQuery which is used to update the input doesn't work. I added some console.logs to see how far it gets:
jQuery(document).ready(function ($) {
console.log('actived the payment chooser');
var payment_method_input = $('input#payment_method');
$(".payment_method_choose").click(function () {
var payment_method = $(this).data('payment_method');
console.log('you selected ' + payment_method);
payment_method_input.val(payment_method);
});
});
I get the 'actived the payment chooser' in the console but the 'you selected...' doesn't appear on clicks suggesting the click event isn't firing properly. Something must be conflicting with the event but I don't think it's the bootstrap nav tabs as it all works fine in the fiddle.
No other error messages are in the console. Any idea how I can track down this conflict?
Edit:
After extensive testing I'm completely stumped.
- The code works fine standalone in a fiddle
The element selector works fine as demonstrated in this code in my page just before my click event code:
$('.payment_method_choose').each(function(index){ mydata = $(this).data('payment_method'); console.log('This is element ' + index + ' containing data: ' + mydata); });Which outputs the relevant info to the console, confirming that the jQuery events do fire in this location and the selector works.
- I've tried using
.on('click', function() {...to no avail. - Woocommerce loads quite a few JS scripts but I can't see a way to discover what or if is interfering with my click event. The
<a>elements were added my me in the template so shouldn't be referenced by any existing scripts. Is there a way to debug this?
Any help greatly appreciated; it is obviously quite difficult to post a web page this extensive for inspection as it's on my local dev server but any suggestions to remove ambiguity please let me know.