0

我打开一个包含 myApp.js 的 html 页面，如下所示：

<html>
<body>
......
<div id="dynamicForm"></div>
......
<script type="text/javascript" src="myPath/myApp.js"></script>
......
</body>
</html>

然后我想在这个html页面（“#dynamicForm”）上动态加载myApp.js中定义的表单，myApp.js有一些这样的行：

.....
//load the form on the html page
$('#dynamicForm').html(createDynamicForm()).show();         
.....
//the function creating the form
function createDynamicForm(){
  var jqForm=$('<form id="dynamicFormId">'
  ......
  + '<button id="btn">OK</button>'
  + '</form>');
  $('body').append(jqForm);
  return jqForm;
}
.....
//click the button on the form to trigger the alert box
("#btn").click(function(){
    alert("you click the button");
});

我可以在html页面上加载表单，但是当我在这个动态加载的表单上单击“确定”按钮时，没有弹出警报，显然这是因为myApp.js在动态表单之前加载了html页面创建后，“click”事件无法由创建表单的 myApp.js 中定义的处理程序处理。我该如何解决这个问题？

4

1 回答 1

3

当您尝试#btn动态时，您需要一个委托事件处理程序，为此您应该使用.on().

$('body').on('click', '#btn', function(){
    alert("you click the button");
});

.on()委托事件的语法看起来：

$(staticElement).on( eventName, target, handlerFunction );

这里，staticElement指向在页面加载时属于 DOM 的元素，即不是动态的。

于 2012-06-29T11:40:24.480 回答