JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container1">
    <p><button class="trigger first">Should alert button element</button></p>
    <p><button class="trigger second">Should do nothing</button></p>
    <p>Clicking outside of a button should do nothing</p>
</div>

<div id="container2">
    <p><button class="trigger first">Should alert button element</button></p>
    <p><button class="trigger second">Should do nothing</button></p>
    <p>Clicking outside of a button should do nothing</p>
</div>

<div id="container3">
    <p><button class="trigger first">Should alert button element</button></p>
    <p><button class="trigger second">Should do nothing</button></p>
    <p>Clicking outside of a button should do nothing</p>
</div>

CSS

#container1 { margin-bottom: 25px; padding: 25px; background: lightgreen; }
#container2 { margin-bottom: 25px; padding: 25px; background: #f77; }
#container3 { margin-bottom: 25px; padding: 25px; background: #f77; }
.trigger { margin-bottom: 10px; }

JavaScript

/**
* Test case 1
* 
* In this case, we use a simple CSS selector string in .on()
* This case should pass
*/

$('#container1').on('click', '.trigger:not(.second)', function(e){
    e.preventDefault();
    alert('this: ' + this);
});


/**
* Test case 2
*
* In this case, we store a jQuery object in a var, and pass it in
* This case should fail
*/

var $mySelector = $('.trigger:not(.second)');
                    
$('#container2').on('click', $mySelector, function(e){
    e.preventDefault();
    alert('this: ' + this);
});


/**
* Test case 3
*
* In this case, we use a more complex jQuery selector inline
* This case should fail
*/

var $mySelectorJQuery = $('.trigger').not('.second');
                    
$('#container3').on('click', $('.trigger').not('.second'), function(e){
    e.preventDefault();
    alert('this: ' + this);
});