如何使JavaScript工作，以響應以後以AJAX方式添加的按鈕

我有一個表單提交消息。我想以AJAX的方式提交。下面的代碼工作，但新添加「回覆」按鈕不起作用：如何使JavaScript工作，以響應以後以AJAX方式添加的按鈕

 {% block body %} 
<script type="text/javascript" src="{{ url_for('static', filename='jquery.form.js') }}"></script> 
<script type="text/javascript"> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
     $("#message_form").ajaxForm(function() { 
      var messageid = ''; 
      var messagepubdate = 0; 
      // GET NEWEST MESSAGE ID 
      $.getJSON($SCRIPT_ROOT + '/_get_new_message', function (data) { 
       messageid = data.messageid; 
       messagepubdate = data.messagepubdate; 
       //alert(messageid); //TESTED! the messageid is the newly added message's _id! 
       var div = document.createElement("div"); 
       div.innerHTML = "<li><img src='{{ g.get_user(g.user._id).email|gravatar(size=48)}}'><p> " + 
       "<strong><a href='{{url_for('user_timeline', username=g.user._id)}}'>{{ g.user._id}}</a></strong>&nbsp; " + $('#new_message').val() 
       + "<small>&mdash; " + messagepubdate + "</small><p align='right' style='text-align: right'><small><a href='#' data-messageid='#replies" + messageid + "' class='reply'>Reply</a></small></p><p><br /><div class='replies hidden' id='replies" + messageid + "'></div></p></p></li>"; 
       $('ul#messages').prepend(div); 
      }); 
      return false; 
     }); 
    }); 
</script>

舊短信，下面的腳本能很好地切換的答覆DIV：

<script type=text/javascript> 
    $(function() { 
     $('a.reply').click(function() { 
      messageid = $(this).attr('data-messageid'); 
      $(messageid).text('loading'); 
      $.getJSON($SCRIPT_ROOT + '/_get_replies', { messageid: messageid.substring(8) }, function (data) { 
       $(messageid).html(data.result); 
       $(messageid).slideToggle(0); 
      }); 
      return false; 
     }); 
    }); 
</script>

來源

2012-02-22 Brent Jiang

官方jQuery 1.7的答案是jQuery.on。

您可以使用jQuery.on訂閱任意事件，並且您可以使用jQuery.off取消訂閱。

聽取所有的點擊匹配a.reply的元素，無論何時它被添加到文檔中，你可以使用下面的代碼：

$(document.body).on('click', 'a.reply', function() { /* ... */ });

同樣，你可以使用

$('body').on('click', 'a.reply', function() { /* ... */ });

基本上，$('body')是添加了事件偵聽器的上下文。所以實際上，jQuery正在等待任何事件冒泡到body元素，並檢查該事件是否爲click事件。如果是，並且點擊事件的元素匹配a.reply選擇器，那麼jQuery將觸發你傳遞的委託作爲第三個參數。

如果我們只是做：

$('a.reply').on('click', function() { /* ... */ });

這將工作方式相同，但只聽由最初由a.reply選擇選擇元素生成的事件。因此，以後添加到dom中的任何新元素都不會包含在內。而且，因爲我們沒有在on方法中添加選擇器，所以它不會偵聽子事件。

編輯

在jQuery中的早期版本中，你可以使用jQuery.live，這在類似的工作，如果不是完全一樣的時尚。在jQuery 1.7中，jQuery.live只是簡單的包裝jQuery.on。

來源

2012-02-22 15:22:38

你想要使用live()函數並將click作爲事件來處理。

.click()適用於目前存在

.live()適用於所有當前和未來對象的所有對象。

$('a.reply').live('click' , function (e){ ... });

更多閱讀：http://api.jquery.com/live/

UPDATE

正如其他人所指出的那樣，live()已被廢棄，你應該使用on()

http://api.jquery.com/on/

來源

2012-02-22 15:15:05 Dutchie432

現場已被棄用（因爲1.4.4版本！） – gdoron 2012-02-22 15:17:10

好吧，我會的。我不知道。它仍然可以工作，並且與'.on（）'函數具有相同的原理。這是很好，如果jQuery的網站更明顯，除了標記爲'棄用' – Dutchie432 2012-02-22 15:29:45

請閱讀你添加的[文檔]（http://api.jquery.com/live/），瞭解爲什麼'活着'是棄用。 – gdoron 2012-02-22 15:31:49

元素添加到DOM不得不附加事件處理程序。您需要在AJAX調用之後附加它們，或者事先使用jQuery的.on()或.live()功能。

來源

2012-02-22 15:15:59

如果您需要將事件附加到將來可能添加的元素（通過Ajax），那麼您應該始終使用事件委派。

簡而言之，它的作用是將一個事件附加到父元素，然後檢查以查看哪個孩子被點擊。添加或刪除子元素無關緊要。

jQuery中使用委派正確的方法是用。對（）和.off（）方法：

$("#dataTable tbody").on("click", "tr", function(event){ 
    alert($(this).text()); 
});

.live（）和委託（）贊成這個新語法已過時。

事實上，jQuery的現在只是徑直通過對這些函數的調用來。對（）和.off（）

live: function(types, data, fn) { 
     jQuery(this.context).on(types, this.selector, data, fn); 
     return this; 
    } 

delegate: function(selector, types, data, fn) { 
     return this.on(types, selector, data, fn); 
    }

注：這不僅是有用的Ajax應用程序。如果你有1000行，例如一個表，這是更爲有效的方使用上表本身委派的事件，而不是附加到元素100S

一些進一步閱讀：

來源

2012-02-22 15:28:14

如何使JavaScript工作，以響應以後以AJAX方式添加的按鈕

回答

相關問題