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触发切换，因为只有链接应该对它做出反应。

DEMO - 更具体地使用选择器

每次单击都会调用两次函数

3 个答案: