Question

在我的小提琴中，我有一个简单的bootstrap导航选项卡组，其中选项卡执行两项操作：

显示相应的标签窗格
将输入值更改为标签主播的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>

当我复制/粘贴我的代码into 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＆＃39;在控制台中'you selected...＆＃39;并不会显示点击事件未正确触发的点击次数。某些东西必须与事件相冲突，但我不认为它是引导导航标签，因为它在小提琴中都可以正常工作。

控制台中没有其他错误消息。知道如何追踪这场冲突吗？

编辑：

经过大量测试后，我完全难倒了。

该代码可以很好地独立in a fiddle
元素选择器工作正常，如我的点击事件代码之前的页面中的代码所示：
```
$('.payment_method_choose').each(function(index){
    mydata = $(this).data('payment_method');
    console.log('This is element ' + index + ' containing data: ' + mydata);
});
```
将相关信息输出到控制台，确认jQuery事件在此位置触发并且选择器正常工作。
我尝试使用.on('click', function() {...无效。
Woocommerce加载了不少JS脚本，但我无法找到一种方法来发现什么或是否干扰了我的点击事件。我在模板中添加了<a>元素，因此不应该被任何现有脚本引用。有没有办法调试这个？

任何帮助非常感谢;显然很难发布这个广泛的网页，因为它在我的本地开发服务器上，但任何消除歧义的建议请告诉我。

Answer 1

您可以尝试使用Chrome调试器。查看已将click事件置于其上的对象的chrome调试器元素panal，并查看是否在该对象上定义了事件。（因为我已经停止使用jQuery for html5，我不确定jQuery实际上放在哪里。）

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

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

编辑：

1 个答案: