javascript - jQuery .change() only fires on the first change - Stack Overflow

admin管理员组

文章数量:1391995

Here is my code:

$.each (t.config.industry, function (i, v) {
    $(v).change(function () {
        console.log("Industry change!");
    });
});

t.config.industry is an array of <select> ids. t.config.industry: ["#W2549_Sl", "#W2601_Sl", "#W2654_Sl"] I have several <select> boxes on the page and I'm tracking them all. Any time any of them change I want to fire something.

Obviously I'm trying to do more than simply console.log, but for the sake of this post I'll limit it to that. On my website the console.log only prints once, on the first change. On subsequent changes of the <select> dropdown menu it does not fire.

Anyone seen this before?

NOTE: I cannot change the HTML mark-up at all.

Here is my code:

$.each (t.config.industry, function (i, v) {
    $(v).change(function () {
        console.log("Industry change!");
    });
});

t.config.industry is an array of <select> ids. t.config.industry: ["#W2549_Sl", "#W2601_Sl", "#W2654_Sl"] I have several <select> boxes on the page and I'm tracking them all. Any time any of them change I want to fire something.

Obviously I'm trying to do more than simply console.log, but for the sake of this post I'll limit it to that. On my website the console.log only prints once, on the first change. On subsequent changes of the <select> dropdown menu it does not fire.

Anyone seen this before?

NOTE: I cannot change the HTML mark-up at all.

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 19, 2012 at 15:52 Jesse Atkinson asked Mar 19, 2012 at 15:28 Jesse AtkinsonJesse Atkinson 11.5k1313 gold badges4343 silver badges4545 bronze badges 2

• It is a little hard to decipher without seeing some markup, but you are containing the change in an each function. Each applies the function once for each element in the batch typically, I have never nestled a change function within an each. – Jay Blanchard Commented Mar 19, 2012 at 15:32
• The mark up is just a bunch of select boxes. But I can't change the mark-up. It's hard to explain, but I'm stuck with the mark-up. – Jesse Atkinson Commented Mar 19, 2012 at 15:46

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

I've witnessed this behavior when the ids of the multiple select elements weren't unique. To resolve the issue in my case, I simply removed the ids, defined a class, and modified the jQuery selector to use the specified class. For example:

    <select class="some_value" some_id="<%= some[:id] %>">

    $(".some_value").change(function() {
        var some_id = $(this).attr("some_id");
        alert('some_id: ' + some_id);
    });

Frankly I consider the behavior a bug in jQuery. Why should it work successfully once and fail thereafter?

If you could add a mon class to each of the select elements you want to monitor, that would simplify your code immensely. Try this (jQuery 1.7 required for the on method):

$(document).on('change','select.monitorme', function() {
    console.log($(this).attr('id')+' changed!');
});

$.each (t.config.industry, function (i, v) {
    $(v).change(function () {
        $(this).addClass('monitorme'); // or just add the class to your markup
    });
});

Try rewrite it in a such way HTML

        <select id="main_industry">
          <?foreach ($industry as $item ){?>
          <option value="<?=$item['id']?>"><?=$item['title']?></option>
          <?}?>
        </select>

JAVASCRIPT

   $('#main_industry').change(function() {
      // your stuff here
      console.log ($(this).val());
   }

You need to add the # before the v (your id) for this selector to work

$.each(t.config.industry, function (i, v) {
   $("#" + v).change(function () {
      console.log("Industry change!");
   });
});

For asp, it's working in my project correctly.

<asp:DropDownList ID="txtvisitname" AutoPostBack="true" class="txtno" AppendDataBoundItems="true" 
    runat="server" onchange="return selectChange()">
    <asp:ListItem Text="--SELECT--" Value="0" />
    <asp:ListItem Text="VISIT1" Value="VISIT1" />
    <asp:ListItem Text="VISIT2" Value="VISIT2" />
    <asp:ListItem Text="VISIT3" Value="VISIT3" />
    <asp:ListItem Text="VISIT4" Value="VISIT4" />
    <asp:ListItem Text="VISIT5" Value="VISIT5" />
    <asp:ListItem Text="Unscheduled  VISIT" Value="Unscheduled  VISIT" />
</asp:DropDownList>

Function:

selectChange() {
    if ($("[id*=txtvisitname]").val() == "Unscheduled  VISIT") {
        $(".other").show();
    } else {
        $(".other").hide();
    }
}

You're setting your listener on every option it seems. Put it on your select only !

本文标签： javascriptjQuery change() only fires on the first changeStack Overflow