jQuery function loading multiple times

Asked Mar 14 '22 at 18:03

Active Mar 14 '22 at 18:12

Viewed 198 times

I have a function which have multiple onChange events inside of it. Let's take a simple example with one event.

Now when I click the button the loadScript() loads and then if #domelement changes, I get the console log. But if I click the button multiple times, the script is loaded multiple times...and then onChange event I get console log multiple times, as many times as I clicked the button.

Pardon my simple code, I hope it helps you understand my problem. I want to load the script once on button click.

function loadScript() {
  $('#domelement').on('change', function() {
    console.log('Dom Element Changed');
  })
}

$('#load').on('click', function() {
  loadScript();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="load">LoadScript</button>

edited Mar 14 '22 at 18:07

isherwood

58,414
16
114
157

asked Mar 14 '22 at 18:03

Joy

https://api.jquery.com/one/ – epascarello Mar 14 '22 at 18:06
1

Are you sure you want to attach a change handler only after clicking a button? What's the reason for that? – isherwood Mar 14 '22 at 18:09
@epascarello thanks, I didn't know about .one() and .off() – Joy Mar 15 '22 at 03:20
```$( this ).off( event );``` this did the trick. Thanks again. – Joy Mar 15 '22 at 03:27

jQuery function loading multiple times

0 Answers0