特定 ID 上的 jquery .on(change)

Question

编辑：对不起，我很累，写在这里的时候代码实际上在工作！卧槽：D

我在同一页面上有许多不同的下拉菜单，并且不想在其中一个发生更改时执行 AJAX 请求。

如果我这样做，它会起作用：

   $(document).on('change', '#changeresponsibleuser', function(){
    var user = $(this).val();
    var partnerid = $(this).attr('name');
           $.ajax({
              type: "POST",
              url: "resources/dialogs/editResponsibleUser.php",
              data: {user: user,
                     partnerid: partnerid},
              success: function(msg){
                    $('.productmessage').html(msg).hide().fadeIn(500).fadeOut(4000);

                  },
                });
  });

但是我在页面上的所有下拉框中都有这个技巧。我不想做这样的事情：

   $(document).ready(function(){
  $("#changeresponsibleuser").on('change',function(){
    var user = $(this).val();
    var partnerid = $(this).attr('name');
           $.ajax({
              type: "POST",
              url: "resources/dialogs/editResponsibleUser.php",
              data: {user: user,
                     partnerid: partnerid},
              success: function(msg){
                    $('.productmessage').html(msg).hide().fadeIn(500).fadeOut(4000);

                  },
                });

      });
  });

所以它只听取具有该确切 ID 的下拉菜单。但它不起作用，不会触发 on change 事件。

如何仅在#changeresponsibleuser 更改时触发事件？

标记如下所示：

 <select id="changeresponsibleuser" name="2" class="responsible2 form-control form-group">

<option name="user" value="36" selected="selected">One user</option>
<option name="user" value="41">Another user</option>
<option name="user" value="40">yet another user</option>
</select>

提前致谢！

原文由 Bolli 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

 $(function(){
 $("#changeresponsibleuser").on('change', function(){
   alert("Works");
 })

});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="changeresponsibleuser" name="2" class="responsible2 form-control form-group">

<option name="user" value="36" selected="selected">One user</option>
<option name="user" value="41">Another user</option>
<option name="user" value="40">yet another user</option>
</select>

有用。你怎么说它不起作用？

但是我在页面上的所有下拉框中都有这个技巧

不，你必须使用类名而不是 id。看来您正在使用重复的 ID。因此它会触发所有具有重复 ID 的选择下拉菜单。

 $(document).on('change', '.changeresponsibleuser',function(){
   alert("Works");
 });

它将触发具有类 changeresponsibleuser 的所有下拉更改

原文由 Gibbs 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您是否使用 AJAX 加载带有 id changeresponsibleuser 的下拉列表？如果您这样做，则意味着下拉菜单不可用于在文档就绪时绑定更改事件。相反，您可以使用 - select onchange="function_name()"

您可以在此函数中编写您的 ajax 请求。

原文由 Afshan Shujat 发布，翻译遵循 CC BY-SA 3.0 许可协议