未启用Jquery函数

Question

我试图通过点击#createbook显示表单，然后通过AJAX提交表单。出于测试目的，我试图通过点击#addme来警示hello world，但它不起作用。但是，当我在浏览器中输入点击功能并且它工作正常时。你们能帮我解决这个问题吗？谢谢。 :)

<div id="mode" style="display:none"> 

</div> 

<script> 
    $("#createbook").click(function() { 
     $.get("BooksLibrary/Create #create", function (data) { 
      $("#mode").html(data + '<button class="btn btn-primary" id="addme">Add Book</button>'); 
     }); 
     $("#mode").dialog({ 
      modal: true, 
      title:'Add Book' 
     }); 
     $("#mode").css({ "display": "block" }); 
    }); 


    $("#addme").click(function() { 
     alert("hello world"); 
    }); 
</script> 

Answer 1

当你的#addme元素动态添加（当你创建你的click事件不存在），您需要将事件委托给当您创建的事件，存在的元素。我们可以做到这一点，利用jQuery's on() method：

$('#mode').on('click', '#addme', function() { 
    alert("hello world"); 
}); 

jQuery的网站上有一个很好的标题为Understanding Event Delegation。第一段解释了这是一个希望易于理解的方式：

事件代表团允许我们附加一个单一的事件侦听器，以父元素，将火了选择匹配的所有后代，无论这些后代是现在存在还是未来增加。