每次點擊都會調用函數兩次

Question

$(".actionsAdListnTo").click函數被觸發兩次。 我嘗試了StackOverflow中發布的各種解決方案，但沒有任何效果。

請兩次觸發任何指針的原因是什么？

如何避免這種情況？

$(".actionsAdListnTo").click(function (e) {
    $('#actionsAdListnTo').slideToggle();
});

$(".ddlAddListinTo li").click(function () {
    var urlstring = "../ActionTypes";
    var ddlselectedVal = $(this).attr('id');
    var $form = $("#frmPostToEmailReports");
    var selectedListinsCount = selected_Listings.length;
    var SelectedMlsnums = selected_Listings.join();

    if (ddlselectedVal != "None" && ddlselectedVal != "select") {

        //***********  To Cart Functionality
        if (ddlselectedVal == 'Tocart') {
            if (selectedListinsCount > 500) {
                if ($('#errmesg').length == 0) {
                    $('.messageCenter').append('<span id="errmesg" class ="errmesg"> <span class="messageIcon"></span><span>The maximum number of listings you may select To Add to cart is 500.</span></span>');
                    return false;
                }
            } else {
                $.post(urlstring,

                function (data) {
                    $(window.open(urlstring, '_blank', 'width=750, height=400')).load(function (e) {
                        var $formCopy = $("#frmPostToEmailReports").clone();
                        $($formCopy).append('<input id="SelectedMlsnums" name="SelectedMlsnums" type="hidden" value="' + SelectedMlsnums + '">');
                        // Here "this" will be the popup window. insert a form element into the popup window.
                        $(this.document).find("#divfrmInfo").html($formCopy);
                        e.preventDefault();
                    });
                });
            }
        }
    }
});

HTML：

<div class="actionsAdListnTo">
     <span> <a href="#" id="select" class="ClearData">Add Listing To</a></span>
     <ul id="actionsAdListnTo" class="ddlAddListinTo" style="display: block;">
            <li id="Tocart">To CART</li>
            <li id="Toportal">To Portal</li>
            <li id="SaveListings">Save Listing</li>                                       
      </ul>
</div>

Answer 1

對li的點擊會冒泡其父，其中之一就是<div class="actionsAdListnTo"> ，因此也會調用父的點擊處理程序。 嘗試停止傳播對li的點擊：

$(".ddlAddListinTo li").click(function (e) {
    e.stopPropagation();
    ...

Answer 2

我在這里看到的是，您正在同一位置定義兩個事件，第二個事件是在孩子身上。

$(".actionsAdListnTo").click( function(e){
  ...
});
$(".ddlAddListinTo li").click(function () {
  ...
})

也許您可以在第二個中使用e.sTopPropagation（）或e.preventDefault（）

Answer 3

在這種情況下，將鏈接僅定位到切換按鈕而不是外部div看起來更正確。 與選擇器一樣，與選擇器一樣具體，類似於：

$(".actionsAdListnTo a#select").click(function (e) {    
    $('#actionsAdListnTo').slideToggle();
});

如果您想使用該結構在沒有ID的情況下更加具體，則可以類似地執行以下操作：

$(".actionsAdListnTo > span:first > a").click(function (e) { 
    $('#actionsAdListnTo').slideToggle();
});

無論如何，HTML的結構方式不需要由div觸發切換，因為只有鏈接應該對此進行響應。

---

演示 -使用選擇器更具體

---