Get input elements and add click-event

Question

I have this (bootstrap) form with three elements. As the button is clicked, another line with three elements is added.

<div class="row align-items-center mb-2 mt-2 ms-1 ">                                        
    <div class="col-5 ps-1 pe-1">
        <select class="form-select example-select" id="cmbSelect[]" name="cmbSelect[]">
           <option>1</option>
           <option>2</option>
           <option>3</option>
        </select>
    </div>
    <div class="col-4 ps-1 pe-1">
        <input class="form-control" type="text" name="txtFirst[]">
    </div>
    <div class="col-2 ps-1 pe-1">
        <input class="form-control" type="text" name="txtSecond[]" value="3">
    </div>
    <div class="col-1 ps-1 pe-1">                       
        <a href="javascript:void(0);" class="add_button" title="Add one more element"><img src="../img/add-icon.png"/ alt="Add"></a>
    </div>
</div>

I would like to execute a JS function if the first element cmbSelect[] is clicked. The function must get the element that triggered the event, because its selected item should be edited. Furthermore the value of the element next to the one that triggered the event should be updated.

What is the best way doing this?

I tried something like this:

        var example_select = $(".example-select");

        var all = $(".example-select").map(function() {
            this.on("click", function (element) {
                console.log("clicked");
                return element.innerHTML;
            });                
        }).get();            
        console.log(all.join());

But example_select is empty and the click event is not fired...

**Always** check the console for errors. Though, strange that you're using `console.log` to check if the event is fire, but not spotting the huge error in the console. Not only check the console for errors, but make sure you aren't filtering errors out of your console. Test with `console.error("test")` — freedomn-m, Feb 21 '22 at 09:14
Also, are you expecting `return element.innerHTML;` to return to the map? (would explain the all.join() ). `return` only returns to the nearest `function`, in this case the click handler. Also, the .map would return immediately (and thus the .get() / .join()) while the click event will fire sometime in the future — freedomn-m, Feb 21 '22 at 09:20
*As the button is clicked, another line is added* - you don't show where this is in relation to the code you've provided. If your `.on` (from the answer below) runs on doc.ready (where it should, or at the end of the document) then it will only work for any *existing* elements. It won't work for newly added lines via the "add" button. You need event delegation. See: [Event binding on dynamically created elements](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) which is likely your actual issue. — freedomn-m, Feb 21 '22 at 09:22

Ian · Answer 1 · 2022-02-21T06:36:44.173

map is not used like this, you will get Uncaught TypeError: this.on is not a function

You just need to use on to listen for event

e.g.

var example_select = $(".example-select");

$('input[type=text]').on('input', function(element) {
  console.log("input");
});

$('select').on('change', function(element) {
  const isFirst = $(this).children('option:first-child').is(':selected');
  console.log(`The current option val: ${$(this).val()}`);
  console.log(`Is it the first option: ${isFirst}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row align-items-center mb-2 mt-2 ms-1 ">
  <div class="col-5 ps-1 pe-1">
    <select class="form-select example-select" id="cmbSelect[]" name="cmbSelect[]">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>
  <div class="col-4 ps-1 pe-1">
    <input class="form-control" type="text" name="txtFirst[]">
  </div>
  <div class="col-2 ps-1 pe-1">
    <input class="form-control" type="text" name="txtSecond[]" value="3">
  </div>
</div>

Get input elements and add click-event

1 Answers1