未啓用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。第一段解釋了這是一個希望易於理解的方式：

事件代表團允許我們附加一個單一的事件偵聽器，以父元素，將火了選擇匹配的所有後代，無論這些後代是現在存在還是未來增加。