jQuery .submit（）不觸發

Question

我做了很多搜索，但無法找出爲什麼我的jQuery .submit()不會觸發。我也試着用.click()作爲提交按鈕。

我現在有一個div模板（包括表格）：

<div class="reply-to-existing-message" style="display: none"> 
     <form class="reply-message-form"> 
      <textarea id="post-reply-message-textarea" name="PostReplyMessage[message]" rows="3" cols="40" style="resize: none"></textarea> 
      <input class="reply-to-message-id" type="hidden" name="PostReplyMessage[id]" /> 
      <input class="post-reply-message-submit" type="submit" value="Reply"/> 
     </form> 
    </div> 

我把這段使用jQuery點擊回覆按鈕，當消息（產生下拉答覆的形式使用戶可以回覆給消息）。這工作正常（雙重檢查使用螢火蟲）。

但是，當我點擊提交按鈕時，我的jQuery代碼不會產生警報，所以它甚至不會觸發。有人能解釋爲什麼會發生，謝謝！ jQuery代碼：

$(document).ready(function() { 
    $('.reply-message-form').submit(function() { 
     alert('test'); 
     return false; 
    }) ; 
}); 

Answer 1

如果你動態添加的內容，即靜態調用到.submit()是不會爲你工作的。這隻會將事件處理程序綁定到在運行時與選擇器匹配的元素，因此在此之後添加的任何元素都不會綁定事件處理程序。

的解決方案是事件委託，使用.on()功能：

$(document).on('submit', '.reply-message-form', function(e) { 
    alert('test'); 
    return false; 
}); 

理想的情況下，而不是使用document，你會選擇最接近的靜態（即存在在頁面加載時）元素將包含所有的動態內容。

或者，如果你使用之前的1.7版本的jQuery，因此沒有進入.on()功能，您可以使用.delegate()函數：

$(document).delegate('.reply-message-form', 'submit', function(e) { 
    alert('test'); 
    return false; 
}); 

Answer 2

對於動態生成的元素，你應該委託的事件，你可以使用on方法，請嘗試以下操作：

$(document).ready(function() { 
    $(document).on('click', 'input[type=submit]', function() { 
     alert('test'); 
     return false; 
    }); 
});