如何在元素事件屬性中不使用JavaScript，但仍通過AJAX加載

Question

我目前正在通過AJAX加載HTM1內容。

我為不同元素的onclick屬性（和其他事件屬性）上的東西提供了代碼。

它確實有效，但是我開始發現代碼變得越來越大，很難閱讀。 我還讀到，具有這樣的事件代碼“內聯”被認為是不好的做法，我應該真正通過element.onclick = foobar並在其他地方定義foobar 。

我知道使用靜態頁面如何做到這一點相當容易，只需在頁面底部放置一個腳本標記，然后在頁面加載后執行它即可。 然后，您可以根據需要附加所有事件。

但是，當通過AJAX加載內容時，如何獲得這種影響。 在某些情況下，加載的內容可能會非常依賴於數據庫中的內容，有時甚至不會顯示HTML的某些部分（例如結果表），甚至會完全顯示其他內容。

如果有人需要，我可以發布一些代碼示例，但是我不知道哪種類型的代碼可以幫助人們。 我要指出的是，我已經在使用Jquery了，因此，如果它具有一些有用的小功能，那將相當不錯！

小代碼示例

這是通過AJAX請求加載的代碼示例

<input type="submit" name="login" value="login" onclick="
if(check_login(this.form)){
  Window_manager.windows[1].load_xml('login/display.php?username=' + this.form.username.value + '&amp;password=' + this.form.password.value);
} else {
  return false;
}">

我知道這只是一個小樣本，但這是我正在談論的事情。 加載內容后如何附加此代碼？

Answer 1

jQuery .live（）方法可能就是您想要的。 它將click事件附加到新創建的HTML元素上，因此您無需在每次重新加載更新面板時都調用.click（）。

Answer 2

您可以通過在javascript中進行事件綁定來獲得更簡潔的HTML代碼。 您所需要的只是識別HTML元素（例如ID）的DOM對象的方法。

如果您有一個ID為“ fooLink”的鏈接，則可以在JavaScript中執行此操作：

docuemnt.getElementById('foo').onclick = function () {
   //do your stuff here
}

如果您的HTML代碼中包含link元素，則其效果與將事件綁定到“ onclick”屬性中的效果相同。

這樣，您可以生成更清晰，更易於閱讀和維護的HTML。