Функция вызывается дважды для каждого щелчка

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

В этом случае это выглядит было бы правильнее предназначаться ссылку только для переключения и а не внешний div. Будьте как конкретные с селекторов как possibe, похожее на это:

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

Если вы хотите быть более конкретным без идентификатора, используя структуру, вы могли бы сделать это simlar к:

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

Во всяком случае, то, как структурирован ваш HTML-код, нет необходимости в том, чтобы переключатель переключился на div, так как только ссылка должна реагировать на него.

---

DEMO - Получение более конкретно с селектором

---

Answer 2

Щелчок на li пузырями своим родителям, причем один из них <div class="actionsAdListnTo">, поэтому обработчик щелчка родителя также называется. Постарайтесь, чтобы остановить распространение щелчка на li:

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

Answer 3

То, что я вижу в том, что вы определяете два события в том же месте, второй на ребенке.

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

Может быть, вы можете использовать e.sTopPropagation() во втором или e.preventDefault()