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 handle 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 button :

<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) {
      // ...
  });