Question

我正在使用jQuery来设置和接收cookie。如果设置了cookie，则在下次加载页面时向特定于cookie集的用户显示一些HTML代码。如果单击页面上的垂直导航，则会将cookie设置为新值，以便在下次加载页面时提取不同的HTML。

问题： 点击处理程序在加载页面时执行其中的代码，这会将cookie设置为不正确的值。我看着冒泡并阻止它，并且使用stopPropagation（）方法不起作用。所有j都包含在$（document）.ready（）

中

javascript：

     if ( $('#courseTab').length ) {
          $('#courseTab li').on('click', function(event) {
            var cookieValue =  $(this).find('a').attr('id');
            setCookie("current_flex_tab", cookieValue, 30);
            console.log("INSIDE CLICK EVENT " + getCookie("current_flex_tab"));
            event.stopPropagation();
          });

          if ( getCookie("current_flex_tab") ) {
            console.log( "OUTSIDE OF CLICK EVENT " + getCookie("current_flex_tab") );
            var currentFlexTab = getCookie("current_flex_tab");
            var currentFlexTabId = "#" + currentFlexTab;

            // Prepares and sends ajax request for current flex study tab
            var params = {"view" : $(currentFlexTabId).attr('href').substring(1)}
            ajaxHandler.requestData( $(currentFlexTabId).attr('value') , params, "POST", currentFlexTab);

          }
      }

控制台输出的屏幕截图： ！image of console output

HTML：

 <div class="col-xs-2 visible-md visible-lg" id="courseTab">
      <h6 class="text-muted">FLEX STUDY</h6>
      <ul class="nav nav-pills nav-stacked">
                <li>
          <a class="data" id="subject_outline_tasks" data-toggle="tab" href="#subject_outline" value="course.getTaskData">Outlines
                        <input type="hidden" name="view" value="subject_outline">
                      </a>
        </li>
                <li>
          <a class="data" id="video_tasks" data-toggle="tab" href="#video" value="course.getTaskData">Lectures
                        <input type="hidden" name="view" value="video">
                      </a>
        </li>
                <li>
          <a class="data" id="essay_tasks" data-toggle="tab" href="#essay" value="course.getTaskData">Essay PQ
                        <input type="hidden" name="view" value="essay">
                      </a>
        </li>
              </ul>
    </div>

有人可以帮我弄清楚为什么点击事件会在页面加载时触发吗？我还选择不包含setCookie插件，因为它在整个网站的其余部分已经100％正常工作。如果有需要，我绝对可以将其添加到帖子中。谢谢

Answer 1

当我遇到附加事件处理程序的问题时，我通过使用on（）方法来附加点击处理程序而不是jQuery的“快捷方式”方法解决了这个问题。

尝试使用此语法。

$(document).on('click', '.mySelector', function(e) {
    e.preventDefault()
    // do stuff
}

$（文档）.on（'click'）事件在没有单击的情况下触发。使用e.stopPropagation（）似乎不起作用

1 个答案: