Question

在我的函数中，当我将click事件添加到object时，调用两次。我发现没有。在形式上的解决方案，但没有任何帮助。

任何人都可以帮我解决这个问题吗？

我的代码：

function accordionOptions(AccordionBox, AccordionSec) {
    var accordionBox = AccordionBox,
        accordionSec = AccordionSec;

    $.each(accordionSec, function (i, values) {
        $('h3', values).each(function () {
            $(this).unbind('click').bind('click', function () {
                $(this).toggleClass('selected').siblings('.expand-area').slideToggle().end().parent().siblings().children('h3').removeClass('selected').siblings('.expand-area').slideUp();

                var subSec = $(this).parent().children().find('.subSec');

                $(subSec).click(function () {
                    console.log(this.tagName); // i am getting 2 times...why?
                })

            });
        })
    })

}

$(document).ready(function () {
    var accordionBox = $('#Accordion'),
        accordionSec = {
            accorIndice: $('#sec1', '#Accordion'),
            accorGeography: $('#sec2', '#Accordion'),
            accorAllIndia: $('#sec3', '#Accordion')
        }
    accordionOptions(accordionBox, accordionSec);
});

这是非常长的HTML，所以我无法放在这里。遗憾

HTML的某些部分：

<ul class='subSec'>
    <li>
        <h4>1. Select a key index</h4>
    </li>
    <li>
        <label>
            <input type="radio" value="CCI" name="cci" checked>Consumer Confidence Index</label>
    </li>
    <li>
        <label>
            <input type="radio" value="HW" name="cci">Housewives Index</label>
    </li>
</ul>
<ul class='subSec'>
    <li>
        <h4>2. Select your sub-indices (optional)</h4>
    </li>
    <li>
        <label>
            <input type="radio" value="CSI" name="subIndices">Consumer Spending Index</label>
    </li>
    <li>
        <label>
            <input type="radio" value="EI" name="subIndices">Employment Index</label>
    </li>
    <li>
        <label>
            <input type="radio" value="Ii" name="subIndices">Inflation Index</label>
    </li>
    <li>
        <label>
            <input type="radio" value="OI" name="subIndices">Onion Index</label>
    </li>
    <li>
        <label>
            <input type="radio" value="CI" name="subIndices">Corruption Index</label>
    </li>
</ul>

Answer 1

点击事件功能结束时return false;怎么样？

Answer 2

我不认为这是一个事件冒泡问题，尽管它很可能会被认为是。

问题似乎是var subSec = $(this).parent().children().find('.subSec');多次找到相同的.subSec，因此不止一次地附加其点击处理程序。

据我所知，您应该能够移除$.each(accordionSec,function(i,values){...});包装并将点击功能附加到h3元素：

$('h3', context).each(function(){
    ...
});

我不确定context没有看到更多HTML，但你应该能够解决这个问题。（试试'＃'+手风琴外包装的id。）

编辑：

哦，是的，您还需要从外部点击处理程序中解放$(subSec).click(function () {...));，否则每次外部点击事件发生时都会反复添加subSecs的点击功能。

jquery点击事件调用2次

2 个答案: