jQuery trigger event on multiple fields with the same classname

Question

I have multiple input fields that have the same class name, such as:

<input type="text" class="input-name" value="John">
<input type="text" class="input-name" value="Maria">

When someone presses ENTER in any field, the text !!! is automatically appended to the value. This works great.

$(document).on('keypress', '.input-name', function(event)
{
    if (event.which != 13)
       return;
    
   $(this).val($(this).val() + '!!!');
});

The problem is that I'd like to press a button and change the value of all fields, by simulating the ENTER keypress event and for some reason, it only triggers in the first input!

This only triggers in the first input:

var e = $.Event('keypress', { which: 13 });
$('.input-name').trigger(e);

This also only triggers in the first input:

$('.input-name').each(function(i, input)
{
   $(input).trigger(e);
});

You can see the problem in this JSFiddle.

It's something to do with sharing the event amongst elements. Move the event creation into the button click event handler, and it works. EDIT: Sorry, move it into the each in the button click event handler so it is unique per element — Taplar
– Taplar, Commented Oct 29, 2020 at 17:38

Derek Wang · Accepted Answer · 2020-10-29 17:40:34Z

2

Define jquery Event object inside the each function callback as follows.

$('.input-name').each(function (i, input) {
  var e = $.Event('keypress', {
    which: 13
  });
  $(input).trigger(e);
});

answered Oct 29, 2020 at 17:40

Derek Wang

10.2k4 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

epascarello · Accepted Answer · 2020-10-29 17:47:23Z

1

I would just make a function that does the work and not deal with event handlers

//function alterInps(inps) {
//  inps.val(function () { return this.value + "!!!"; });
//}

function alterInps(inps) {
  var re = /!!!$/;
  inps.val(function () { 
    return this.value + (re.test(this.value) ? '' : '!!!');
  });
}

$(document).on('keypress', '.input-name', function(event) {
  if (event.which != 13) return;
  alterInps($(this));
});

$('button').on("click", function () {
  alterInps($('.input-name'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input-name" value="John">
<input type="text" class="input-name" value="Maria">
<button type="buton">All</button>

edited Oct 29, 2020 at 17:47

answered Oct 29, 2020 at 17:42

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

Sarun UK · Accepted Answer · 2020-10-29 17:42:06Z

0

$('.input-name').on('keypress', function(event)
{
    if (event.which != 13)
    return;
    
   $(this).val($(this).val() + '!!!');
});

$(document).on('click', '#btn-submit', function()
{
    var e = $.Event('keypress', { which: 13 });
    //$('.input-name').trigger(e);
  
  $('.input-name').each(function(i, input)
  {
    $(input).trigger(e);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-submit">
  Click me
</button>

<input type="text" class="input-name" value="Maria">
<input type="text" class="input-name" value="John">

answered Oct 29, 2020 at 17:42

Sarun UK

6,7667 gold badges26 silver badges52 bronze badges

Collectives™ on Stack Overflow

jQuery trigger event on multiple fields with the same classname

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related