文章/答案/技术大牛

发布

社区首页 >问答首页 >窗口上的JQuery触发后单击事件

问窗口上的JQuery触发后单击事件
EN

Stack Overflow用户

提问于 2020-10-04 21:40:45

回答 1查看 32关注 0票数 0

我正在做一个非常简单的Jquery驱动的事件，用户点击两个div元素，然后用所选项目的数据进行API调用。由于某种原因，$.post函数触发了我的$(".objects").click()调用，将窗口设置为这样。一开始我以为它会导致双击(因为click函数依赖于元素中的数据，而window没有)，直到我做了一些调试。下面是我的代码：

HTML：

<div class="option-selection" data-value="1">Option 1</div>
<div class="option-selection" data-value="2">Option 2</div>
<div class="option-selection" data-value="3">Option 3</div>
<div class="option-selection" data-value="4">Option 4</div>
... etc ...

Javascript：

$(".option-selection").click(function(ev) {
    console.log("CLICK ACTIVATED:");
    console.log(this);
    ev.stopImmediatePropagation(); // I tried this to solve the double click. ev is undefined.
    ... rest of code ...
    select_item_2(this);
}

function select_item_2(element) {
    console.log("SELECTING ITEM 2");
    ... get data ...
    console.log("ATTEMPTING TO POST ...");
    $.post( ... );

}

控制台输出：

CLICK ACTIVATED:
<div class="option-selection" data-value="5">…</div>
SELECTING ITEM 1
CLICK ACTIVATED:
<div class="option-selection" data-value="21">…</div>
SELECTING ITEM 2
ATTEMPTING TO POST ...
CLICK ACTIVATED:
Window {parent: Window, opener: null, top: Window, length: 1, frames: Window, …}
Uncaught TypeError: Cannot read property 'stopImmediatePropagation' of undefined
    at 1:133
    at i (jquery.min.js:2)
    at qt (jquery.min.js:2)
    at qt (jquery.min.js:2)
    at Object.<anonymous> (jquery.min.js:2)
    at Function.each (jquery.min.js:2)
    at qt (jquery.min.js:2)
    at qt (jquery.min.js:2)
    at qt (jquery.min.js:2)
    at qt (jquery.min.js:2)

你知道这里发生了什么以及如何修复它吗？我知道我可以检查元素是否是dom对象(我找到了一个函数)，但这看起来不应该像这样首先触发。

dom

javascript

html

jquery

回答 1

Stack Overflow用户

发布于 2020-10-04 22:11:05

试试下面的代码。

var option_1;

$(".option-selection").click(function(ev) {
  if(option_1) { // Check if first option selected
    if(option_1 == $(this)[0]) { // Check if first selected item is not the current item
      console.log("Option already selected.");
    } else {
      console.log("2 different options selected.");
      // Run your POST call here
      // Once your post call is done you can reset the option_1 value, so that users can select other option for next round if needed
      option_1 = null;
      console.log("Options reseted");
    }
  } else {
    option_1 = $(this)[0];
    console.log("New Option.");
  }
});

.option-selection {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="option-selection" data-value="1">Option 1</div>
<div class="option-selection" data-value="2">Option 2</div>
<div class="option-selection" data-value="3">Option 3</div>
<div class="option-selection" data-value="4">Option 4</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64195355

复制

相似问题

问窗口上的JQuery触发后单击事件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问窗口上的JQuery触发后单击事件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问窗口上的JQuery触发后单击事件
EN