Question

点击事件倍数倍。我有三个div，它们都有相同的类但不同的id。当我点击第一个div的第一个“a”链接时，它将触发事件三次，当我点击第二个div的第一个“a”链接时，它将触发事件两次，当我点击第一个“a”链接最后一个div它将触发事件一次。

这是我的HTML代码：

<div class="b3">
<div class="btn-group">
    <div class = "b3_inside">
        <a class="product_a" id="a_1" href="#0">
            <img src="a1.png">
                <span>
                    A1
                </span>
        </a>
    </div>
    <div class="b3_inside">
        <a class="product_a" id="a_2" href="#0">
            <img src="a2.png">
                <span>
                    A2
                </span>
        </a>
    </div>
    <div class="b3_inside">
        <a class="product_a" id="a_3" href="#0">
            <img src="a3.png">
            <span>
                A3
            </span>
        </a>
    </div>
    <div class="b3_inside">
        <a class="product_a" id="a_4" href="#0">
            <img src="a4.png">
            <span>
                A4
            </span>
        </a>
    </div>
    <div class="b3_inside">
        <a class="product_a" id="a_5" href="#0">
            <img src="a5.png">
            <span>
                A5
            </span>
        </a>
    </div>
</div>

<div class="b3">
<div class="btn-group">
    <div class = "b3_inside">
        <a class="product_a" id="a_11" href="#0">
            <img src="a1.png">
                <span>
                    A1
                </span>
        </a>
    </div>
    <div class="b3_inside">
        <a class="product_a" id="a_21" href="#0">
            <img src="a2.png">
                <span>
                    A2
                </span>
        </a>
    </div>
    <div class="b3_inside">
        <a class="product_a" id="a_31" href="#0">
            <img src="a3.png">
            <span>
                A3
            </span>
        </a>
    </div>
    <div class="b3_inside">
        <a class="product_a" id="a_41" href="#0">
            <img src="a4.png">
            <span>
                A4
            </span>
        </a>
    </div>
    <div class="b3_inside">
        <a class="product_a" id="a_51" href="#0">
            <img src="a5.png">
            <span>
                A5
            </span>
        </a>
    </div>
</div>

<div class="b3">
<div class="btn-group">
    <div class = "b3_inside">
        <a class="product_a" id="a_12" href="#0">
            <img src="a1.png">
                <span>
                    A1
                </span>
        </a>
    </div>
    <div class="b3_inside">
        <a class="product_a" id="a_22" href="#0">
            <img src="a2.png">
                <span>
                    A2
                </span>
        </a>
    </div>
    <div class="b3_inside">
        <a class="product_a" id="a_32" href="#0">
            <img src="a3.png">
            <span>
                A3
            </span>
        </a>
    </div>
    <div class="b3_inside">
        <a class="product_a" id="a_42" href="#0">
            <img src="a4.png">
            <span>
                A4
            </span>
        </a>
    </div>
    <div class="b3_inside">
        <a class="product_a" id="a_52" href="#0">
            <img src="a5.png">
            <span>
                A5
            </span>
        </a>
    </div>
</div>

这是我的jquery函数：

function gettingClick() {
$(".product_a").on("click",function(){
    var btnId = this.id;
    var str = btnId.split("_");
    if(btnId == "a_"+strt[1]){
        callMethod();
    }
});}

Answer 1

尝试使用以下代码在点击第一个链接时触发事件：

function gettingClick() {
$("#a_1").on("click",function(){
var btnId = this.id;
var str = btnId.split("_");
if(btnId == "a_"+strt[1]){
    callMethod();
}
});}

你需要使用＆＃34;＃＆＃34;在选择器部分触发第一个链接上的点击事件。

Answer 2

请检查以下js小提琴链接，只能拨打一次。

https://jsfiddle.net/y3uj5f6z/

$(".product_a").on("click",function(){
    var btnId = this.id;
    var str = btnId.split("_");
     console.log(btnId);
    if(btnId == "a_"+str[1]){
        alert(btnId);
    }
});

Answer 3

这里解决的问题是如何避免克服这个触发问题的方法。

$(document).off('click','.classname').on('click','.classname',function(e){/*code*/});

谢谢你帮助我和你的支持。

Jquery事件多次触发

3 个答案: