为什么我的jQuery click事件没有在我的WordPress网站上触发

Question

在我的小提琴中，我有一个简单的引导导航选项卡组，其中的选项卡有两件事：

• 显示相应的选项卡窗格
• 将输入的值更改为选项卡锚的data-payment_method属性定义的值。

这是代码：

<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>

窗格和输入：

<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>

当我将代码复制/粘贴到jsFiddle中时，它可以正常工作，但我在WordPress网站（运行WooCommerce）时遇到了麻烦，加载了与两者相关联的标准脚本（太多内容无法在此处发布！）。

导航选项卡工作正常，并且选项卡窗格切换没有问题。 但是我自己的用于更新输入的jQuery不起作用。 我添加了一些console.logs来查看它能走多远：

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

我在控制台中看到“ actived the payment chooser ”，但单击时未出现'you selected... ”，这表明点击事件未正确触发。 一定与该事件有冲突，但是我不认为这是引导项的导航选项卡，因为所有这些在小提琴中都可以正常工作。

控制台中没有其他错误消息。 知道如何找到这种冲突吗？

编辑：

经过广泛的测试，我完全陷入了困境。

1. 该代码可以在小提琴中独立运行

2. 元素选择器的工作正常，如单击事件代码之前的页面中的代码所示：

    $('.payment_method_choose').each(function(index){ mydata = $(this).data('payment_method'); console.log('This is element ' + index + ' containing data: ' + mydata); }); 

   它将相关信息输出到控制台，确认jQuery事件确实在该位置触发并且选择器起作用。

3. 我尝试使用.on('click', function() {...无济于事。
4. Woocommerce加载了很多JS脚本，但是我看不到一种方法来发现什么或是否在干扰我的click事件。 <a>元素是我自己在模板中添加的，因此任何现有脚本都不应引用。 有办法调试吗？

任何帮助，我们将不胜感激； 在我的本地开发服务器上发布这么大的网页以进行检查显然很困难，但是如果有任何消除歧义的建议，请告诉我。

Answer 1

您可以尝试使用Chrome调试器。 在chrome调试器元素面板中查看您放置了click事件的对象，然后查看该对象上是否定义了事件。 （由于我已经停止将jQuery用于html5，因此我不确定jQuery实际在哪放置偶数。）

如果对象上有任何事件，只需在调试器源面板中放置一些断点即可。