Question

此刻我很难过。我在.title上实现了一个click（）函数来切换它的兄弟（表）是否显示或隐藏。这很好。我的问题是我在.title里面有另一个点击功能，它位于一个标签上。当我点击一个标签时，我想让表保持打开状态但是.title会写入并关闭它并将一切都搞砸了。目前我在一个标签上有一个onClick（）（它仍然不起作用），它是用jQuery .click（）完成的，但我无法正确使用它。

<script>
function dateChange(boatInput, dateInput){

         $("table").first().children().remove();
         $("table").first().load("availability.asp?boatType="+ boatInput +"&date="+ dateInput +"");
}
$(document).ready(function() {
    $("table").first().load("availability.asp?boatType=PowerCatamaran&date=currentDate", function(response, status, xhr){
        if (status == "error") {
            var msg = "Sorry but there was an error: ";
            $("table").html(msg + xhr.status + " " + xhr.statusText);
        }
    });


    $(".title").click(function(){
      $(this).next().toggleClass("hide");
      var boatName = $(this).next().attr('id');
      if(!$(this).next().hasClass('hide')){
          if(boatName == "SailingCatamaran"){
              $(this).next().load("#");
          }
          else if(boatName == "PowerCatamaran"){
              $(this).next().load("#");
          }
          else{
              $(this).next().load("#");
          }
      }
      $(this).children().last().toggleClass("hide");
      $(this).find('.dateSelect').toggleClass("hide");

    });
}); 
</script>

<div class="title">
        <h2>Catamarans</h2>
        <div class="dateSelect">
            <div class="prev">
                <p>Prev</p>
                <a href="#">< month</a>
                <a href="#">< week</a>
                <a href="#">< day</a>
            </div>

            <div class="next">
                <p>Next</p>
                <a href="#" onClick="dateChange('PowerCatamaran', 'nextMonth')">month ></a>
                <a href="#">week ></a>
                <a href="#">day ></a>
            </div>
        </div>
        <div class="expand hide">
            Click to Expand
        </div>
     </div>

到目前为止，代码是静态的。我只是需要一些实际的功能才能使它全部动态化。我提前为可怕的代码道歉！

Answer 1

您需要通过调用event.stopPropagation()来阻止点击事件从内部事件中传播

$('<tag-selector>').click(function(event){
    //do your stuff
    event.stopPropagation()
});

Answer 2

我在CSS和jQuery选择器上有点生疏，但我认为一旦用类标记元素，它也适用于所有子元素。

所以div标记的.title中的a，p等也继承了类.title。

如果您不希望这样，我建议您更具体地使用jQuery选择器来选择哪些元素获得.click（）处理程序。

也许：

$(".title > table").click(function(){...})

来自jQuery "Child Selector"这表示将处理程序应用于所有在类中具有父元素的表元素.title

jQuery .click（）会覆盖标签

2 个答案: