jQuery给动态元素绑定事件

最近坐项目有一个需求是点击添加按钮后，出现文本框及提交按钮，提交文本后，添加按钮再次显示，如此循环。但问题来了，在提交文本后，再次显示的添加按钮，点击后不会出现文本框及提交按钮，原来的click事件已经失效。具体代码如下

 

<div class="creation">
     <a href="#" class="create">
          添加
     </a>
</div>

 

$(function(){
    addText();
}
function addText() {
   $('.creation').on('click','a',function() {
        $('.creation').html('<form action="#" onsubmit="return false;"><input type="text" class="create-input" name="im" autofocus="" autocomplete="off"><button class="btn btn-primary btn-bm create-submit" onclick="createText();">添加</button> </form>');
        });
}
function createText(){
    $.post(url,{key:value},function(){
        $('.creation').html('<a href="#" class="create"> 添加新印象 </a>');
    })
}

 

 

修改后，成功的代码如下：

  $('creation').on('click', 'a', function() {} //将原先的lick事件修改一下：添加一个参数'a'.

 虽然是小点，但也是一个坑，在此希望大家一块跨越这个坑。

还有一点就是：只要是from表单都会有默认的提交行为，致使页面刷新，即使你使用ajax请求，解决方法：

<from anction="#" onsubmit="return false;"></form>

添加的return false，在别的事件也有应用比如<a>标签的默认跳转等等。