Question

我还在学习JQuery，今天我遇到了一个我无法理解的问题。我有一些选择下拉列表在JQuery中作为函数的一部分创建，然后我想在更改下拉列表时做一些事情，在我完成之后，再次运行该函数（这也将重新创建下拉列表）再次）。在重新创建这些下拉列表后，更改后的更改不会再次触发（换句话说，它只能运行一次）。

如果我把＆lt;选择＆gt; HTML中的标签，只是在JQuery中做选项，但显然我做错了，想知道它是什么。

这是一个简单的事情，我认为这表明了我的意思。控制台将在第一次登录，但不会在此之后的任何时间记录。

TIA

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script language="javascript">
$(document).ready(function(){
    function toggle_test() {        
        // do other things
        var dt = '<select name="popdrop" id="popdrop" class="inspopulate"><option value="">Select</option><option value="1">1</option><option value="1">1</option></select>';
        $('#tt').html(dt);  
    }
    toggle_test();
    $(".inspopulate").change(function() {
        // do stuff and run toggle_test at the end
        console.log($(this).attr('id')+' changed!');
        toggle_test();
    });
});   
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form>
<div id="tt"></div>
</form>
</body>
</html>

Answer 1

事件处理程序绑定到元素。替换元素时，会丢失处理程序。您可以在每次创建元素时绑定处理程序，但在此处委托可能会更容易：

$(document).on('change', ".inspopulate", function() {

当元素是动态的时，变化不会触发第二次

1 个答案: