One jQuery Change Event on Multiple Elements

问题

I have 3 textboxes, all with the same id's that I process into ASP by bringing it into a controller array

I have a link that adds an unlimited number of textboxes below the first 3.

My current change statement:

    $('input.#invent').change(function () {

works fine for the change event on the first textbox, but the others with the same information do not fire it when changed

What is the best strategy for getting the change event to fire when any of the 3+ textboxes change??

回答1:

Change all three elements with the #invent ID to a class instead (ID's must to be unique), or it's only going to work for the first element, like what's currently happening in your case.

Then, you can target all of the elements that have the .invent class:

$('input.invent').change(function () {
   // Here, $(this) refers to the specific element of the .invent class which 'changed'
}):

Read more about the difference between ID and Class selectors here.

回答2:

Best strategy (95% of the time): use a class to add a listener for multiple elements. ID's are expected to be unique. Classes are made for this and will give you the most extensibility in the future.

HTML:

<input type="text" name="input1" class="invent" />
<input type="text" name="input2" class="invent" />

jQuery:

$('.invent').change(function () {
   // Do magical things
});

For the other 5%:

If you'd rather use unique IDs or unique field names instead of a single class as described in the selected answer, you can add a listener for multiple uniquely named elements like so:

HTML:

<input type="text" name="something1" id="invent1" />
<input type="text" name="something2" id="invent2" />
<input type="text" name="something3" id="invent3" />

you can use jQuery multiple selectors:

$('#invent1, #invent2, #invent3').change(function () {
   // Do magical things
});

OR you can use jQuery starts with attribute selector:

//target based on what input id starts with
$('[id^="invent"]').change(function () {
   // Do magical things
});

// OR target based on input name attribute starts with
$('input[name^="something"]').change(function () {
   // Do magical things
});

回答3:

Since id is unique, you should using class instead. Then you can iterate over your class using each and apply $(this) to target current change input:

$('input.invent').each(function () {
    $(this).change(function () {

    });
});

回答4:

Lets say your HTML is like this:

<input type="text" id="invent" />
<input type="text" id="invent" />
<input type="text" id="invent" />
<input type="text" id="invent1" />
<input type="text" id="invent2" />
<input type="text" id="invent3" />

Now the Id must be unique. So put a class to all the inputs like invent and the HTML will be:

<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />

And call the on change event like:

// This would be called now for all the text-boxes
$('input.invent').change(function () {
   // Your code here
}):

In case, you can't add class for all the text-boxes. You cam simply do this:

$("input:text").change(function () {
   // Your code here
}):

回答5:

@Eli answers exactly matches for you. If you want to read all the Text-boxes then you can use the following method.

  $('input[type=text]').each(function () {
                    $(this).change(function () {
                        alert($(this).val());
                        $(this).focus();
                    });
                });

回答6:

You cannot use ID to reference more than one element. An ID must be UNIQUE on any HTML page !

Use a class instead :-).

来源：https://stackoverflow.com/questions/15864307/one-jquery-change-event-on-multiple-elements

标签

jquery

html

asp-classic