jquery 事件不会在第二次点击时触发

Question

我有如下的 html。我想添加切换功能，其中 class=togglediv 的 div 应在单击标题为 class=grid-1of1 时显示或隐藏。

问题是我打开切换按钮时的第一次点击工作正常。但是，当我再次单击标题以隐藏 div 时，单击事件不会被触发。

HTML:

<div class="thead clearfix commonHeader">
               <div class="gs grid-1of1 hcell pointer">
                            <p>Sales<span class="icn"></span></p>
                        </div>
                <div class="togglediv" style="display: block;">
                <div id="salesProductsMultiDiv" class="clearfix ms-shim">
                    <p class="loader center hide"><img class="loadingIcon" src="/resources/images/spinner.gif"></p>

    <div class="vError mls pll hide" data-id="salesProductsMulti"><span class="mll">Please select a product</span></div>
    <select id="salesProductsMulti" class="multiselect" multiple="multiple" style="position: absolute; left: -9999px;">
    <option value="iphone" data-id="iphone" title="iPhone">iPhone </option><option value="ipad" data-id="ipad" title="iPad" selected="selected">iPad </option><option value="mac" data-id="mac" title="Mac" selected="selected">Mac </option><option value="ipod" data-id="ipod" title="iPod" selected="selected">iPod </option><option value="appletv" data-id="appletv" title="Apple TV" selected="selected">Apple TV </option><option value="beats" data-id="beats" title="Beats">Beats </option><option value="watch" data-id="watch" title="Watch">Watch </option><option value="watchedition" data-id="watchedition" title="Watch Edition">Watch Edition </option>
    </select><div id="ms-salesProductsMulti" class="ms-container"><div class="ms-selectable" data-id="salesProductsMulti"><input type="text" class="multiselect-filter field-input field-text" autocomplete="off" placeholder="Available Products"><ul class="ms-list ms-focus"><li class="ms-elem-selectable" id="_i_p_h_o_n_e_-selectable"><span>iPhone </span></li></ul></div></div>
</div>

                <div class="clearfix field-block channelInputText">
                    <label class="h-label" for="salesSearchRadius">Search Radius</label>
                    <input class="h-input input-n field-input field-text" type="text" value="" data-id="salesSearchRadius" maxlength="35" id="salesSearchRadius">
                </div>

                <div class="clearfix field-block channelInputText">
                    <label class="h-label" for="salesMaxResults">Max Results</label>
                    <input class="h-input input-n field-input field-text" type="text" value="" data-id="salesMaxResults" maxlength="35" id="salesMaxResults">
                </div>
                </div>
             </div>

Javascript：

$('.commonHeader .grid-1of1').off('click').on("click", function(event) {            
                var $this = event.currentTarget;
                if($($this).is('.grid-1of1')){
                    $($this.parentElement.getElementsByClassName('togglediv')).toggle();
                }
            });

Answer 1

试试这个

js fiddle 工作示例。

 $('.commonHeader .grid-1of1').click(function () {

     $(this).parent().find('.togglediv').toggle();

});

Answer 2

改成这样：

$(document).ready(function(){ // as per comment try the code in this block.
    $('.commonHeader .grid-1of1').off('click').on("click", function(event) {
      var $this = $(event.currentTarget); // make a jquery selector
      $this.siblings('.togglediv').toggle(); // use ".siblings('targetClass')" to toggle
    });
});

您可以使用.siblings() 方法来定位要切换的所需div。

或者你可以尝试使用javascript的Node.nextElementSiblings作为：

$($this.nextElementSibling).toggle();

---

$('.grid-1of1').off('click').on("click", function(event) {
  var $this = $(event.currentTarget);
  $this.siblings('.togglediv').toggle()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gs grid-1of1 hcell pointer">
  <p>Sales<span class="icn"> span</span>
  </p>
</div>
<div class="togglediv" style="display: block;">togglediv</div>

---

现在看起来您的页面上有动态生成的元素。因此，如果您尝试绑定任何不起作用的直接事件，则必须委托给页面加载时可用的最近的静态父级或document 本身。试试这个：

$(document).on("click", ".grid-1of1", function(event) {
  var $this = $(event.currentTarget);
  $this.siblings('.togglediv').toggle();
});