title: Why does jquery run incrementally with every click?
body: <p>There is a simple function written in jquery. I print the incoming data con left with each click. But every time I click, the previous id data is also written to the console.</p>
  <pre><code>data_id: 38
  -------------------
  data_id: 38
  data_id: 45
  -------------------
  data_id: 38
  data_id: 38
  data_id: 45
  data_id: 38
  data_id: 38
  data_id: 45
  data_id: 45
  data_id: 56
  </code></pre>
  <p>As above.</p>
  <pre><code>    $('body').on('click', 'input.data_update', function (e){
          
          var data_id  = $(&quot;input[name='data_id']&quot;).val();
          
          function update(data_id){
              console.log(&quot;data_id: &quot; + data_id);
          }
          
          $(document).on(&quot;click&quot;, &quot;input.form_button_1&quot;, function (e){
              update(data_id);
          });
          
          var single_click = true;
          $(document).on(&quot;keydown&quot;, function (e){
              if (!single_click) return;
              var key = e.which;
              if(key == 13 || key == 27){
                  update(data_id);
              single_click = false;
              }
              
          });
          
      });
  </code></pre>
  <p>When I use .off () to prevent this, I can't print any data</p>
  <pre><code>        $(document).off().on(&quot;click&quot;, &quot;input.form_button_1&quot;, function (e){
              update(data_id);
          });
          
          $(document).off().on(&quot;keydown&quot;, function (e){
              var key = e.which;
              if(key == 13 || key == 27){
                  update(data_id);
              }
          });
  </code></pre>
  <p>It works fine when I use window instead of var. But how can I solve it without using window?</p>
  <pre><code>var data_id  = $(&quot;input[name='data_id']&quot;).val();
  window.data_id  = $(&quot;input[name='data_id']&quot;).val();
  </code></pre>