I'm stuck with the DOM. When the search button is pressed, JS script will inject element1, and there is a new function (A) that appears after injecting element1.
I changed the class name on element1 to element2. When I want to run function(A) a bug occurs, which function(A) still indexes element1, not element2. How can I fix it?
$('.search').click(function() {
$('button').after('<div class="a b">New div element here!</div>')
// in actual this code will run by click button and this code working
$(this).siblings().last().toggleClass("b")
// this code is not triggered, it should be triggered
$('.a:not(.b)').click(function() {
console.log('clickety click');
})
}).b {
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="search">search</button>When you bind the events, they stay bound until they are unbound from the element. So if you want to "clean" your event bindings, you can use jQuery unbind() before binding new events:
$('your.selector').unbind().click(...
Another workaround is performing a class check inside the click function callback, to be sure if the element still has (or still hasn't) some class. Just be sure if you need or not to call some kind of preventDefault() to get a better control because button element does have a default behavior.
$('.a').click(function () {
if ( ! $(this).hasClass('b') ){
// Do things with .a elements that don't have .b class
}
})