JQuery Post触发窗口上的点击事件

Question

I'm doing a very simple Jquery powered event where the user clicks on two div elements, then an API call is made with the data from the selected items. For some reason, The $.post function is triggering my $(".objects").click() call setting the window as this. I thought it was causing a double click at first (Because the click function depends on data from the element, which window does not have), until I did some debugging. Here's my code :

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( ... );

}

Console Output :

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)

Any ideas what's happening here and how to fix it ? I know I can just check if the element is a dom object (I found a function for that), But this seems like it shouldn't be triggering like this in the first place.

Answer 1

Try below code.

 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>