jQuery delegated events work like direct events

Question

I add dynamic button in my page and I want making an AJAX request when I'm clicking on it.

But my code handles every document's click, what I'm doing wrong?

<script type="text/javascript"> 
  var $selButton=$("input[id^=btn_match_]"); 

  $(document).on("click", $selButton, function (e) {
      //  code is executing on every click on the page              
      //  and not only on button click
  });
</script>

One of my buttons:

<input id="btn_match_26179" class="btn btn-primary btn-xs" type="submit">

Answer 1

The selector is supposed to be a string, not a jQuery object. If it is not a string, then it will get passed as event.data to the handler, instead of acting as a selector. See the docs.

Try this:

  var selector = "input[id^=btn_match_]";

  $(document).on("click", selector, function (e) {
      // ...
  });