Question

<html>
  <head>
  <script type="text/javascript" src="js/accordian/jquery-1.9.1.js">
  </script>
  <script type="text/javascript">


$(document).on("click", ".checkboxclas", function(e) {
  var divdata = $("div.activateUiHTML").html();
   $("#ordersdiv").prepend(divdata);
$("#ordersdiv .Topping-details").hide();
  });


 </script>
</head>

<body>
   <div  class="activateUiHTML"  data-role="collapsible">
   <div class="prd-items-detials">
      <form><input type="checkbox" class="checkboxclas" name="checkbox-mini-0" id="59" > 
         <label class="testtt" for="checkbox-mini-0">Ice Cream Butter Scotch</label> 
      </form>
      <div class="Topping-details" id="59">
         <section id="topping_tsection_59">
            <i id="topping-close"></i>
            <aside>
               <section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
            </aside>
         </section>
      </div>
   </div>
   </div>
   <div id="ordersdiv"></div>
</body>

</html>

当点击CheckBox时，我有一个监听器，我将数据附加到名为 ordersdiv 的div中并且只有当元素为“ orderdiv ”元素的子元素时才隐藏元素“ Topping-details ”。

现在我被震惊了。

我有听众.Topping-details如下所示，这对于订单div和activateUiHTML div都有共同作用

$(document).on("click", ".Topping-details", function () 
{

    alert('ddd');

});

如何区分 ordersdiv 下的.Topping-details和 activateUiHTML div

下的.Topping-details的点击事件

http://jsfiddle.net/e56TY/2/

Answer 1

$(document).on("click", "#ordersdiv .Topping-details", function(){
    alert('ddd');
});

和

$(document).on("click", ".activateUiHTML .Topping-details", function(){
    alert('aaa');
});

P.S。 ids不应该以数字开头！

Answer 2

您可以查看最近的orderdiv的长度：

 if($(this).closest('#ordersdiv').length){
   //in order div
 }

<强> Working Demo

Answer 3

<强> Updated Demo

检查一下，

$(document).on("click", ".Topping-details", function () 
{
    if($(this).parents('#ordersdiv').length){
        alert('ordersdiv')
    }
    else{
        alert('activateUiHTML')
    }
});

您必须检查当前点击的.Toppping-details是否有父名ordersdiv。

使用$(this).parents('#ordersdiv').length。如果length不存在，则{0}将返回0。

参考：

.parents() ：获取指定的祖先。
.length ：拒绝。元素。

Answer 4

您可以使用.closest()查找父级，然后检查其长度

代码的

$(document).on("click", ".Topping-details", function () {
    var ordersdiv = $(this).closest('#ordersdiv').length;
    var activateUiHTML = $(this).closest('div.activateUiHTML').length;

    if (ordersdiv) {
        alert('Under ordersdiv');
    }
    if (activateUiHTML) {
        alert('Under activateUiHTML');
    }
});

DEMO

如何区分两个不同div中存在的同一类HTML

4 个答案: