检测用户对select>.html()"

Detect a user change of a <select> list created with Jquery ".html()"

本文关键字：html quot 用户 select 检测      更新时间：2023-09-26

是否有一种方法来检测当一个选择列表的值被改变，当这个选择列表已经添加了.html(htmlString)或.append(content[,content])的jQuery函数?

HTML代码:

<ul class="htmlClass">
   <!-- Populated via JS -->
</ul>

JAVASCRIPT代码:

var MyDropDownMenu= "";
MyDropDownMenu += '<select class="field">';
MyDropDownMenu += '<option value="1">Option 1</option>';
MyDropDownMenu += '<option value="2">Option 2</option>';
MyDropDownMenu += '</select>';
$('ul.htmlClass').html(MyDropDownMenu);
$(".field").change( function() {   //Doesn't work!!!
      alert("test1");
});
$(".htmlClass").change( function() {  //work        
      alert("test2");
});

您需要使用事件委托

$('ul.htmlClass').on('change',".field", function() { 
      alert("test1");
});
  • http://learn.jquery.com/events/event-delegation/

使用委托事件处理程序

$('ul.htmlClass').on('change','.field', function() {
  alert("test1"); 
});

参见直接事件和委托事件了解更多信息。

代码中的另一个问题是您将select直接添加到ul元素。这是不对的。

我看到两个选项

1)用li标签包裹select 

var MyDropDownMenu= "<li>";
myDropDownMenu += '<select class="field">';
MyDropDownMenu += '<option value="1">Option 1</option>';
MyDropDownMenu += '<option value="2">Option 2</option>';
MyDropDownMenu += '</select>';
MyDropDownMenu += '</li>';

2)转换你的ul到div，如果你不需要一个列表

相关文章：