編輯以.html（）的元素，並在一個聲明中

在jQuery中我經常寫對語句來改變一個按鈕，它的事件類似與應用。點擊（）的處理程序：編輯以.html（）的元素，並在一個聲明中

$("#button-container").html("<img id='button' src='button.png'>"); 
$("#button").click(buttonFunction);

上午我缺少一些明顯的/簡單的方法在一行做到這一點，就像在：

$("#button-container").html("<img id='button' src='button.png'>").click(buttonFunction);

？

來源

2011-11-02 sans

如果一個元素包含在另一個元素中，則可以使用DOM遍歷方法輕鬆地將它們鏈接在一起。你怎麼做取決於你的HTML。 – Blazemonger

從jdavies的回答工作，我喜歡做以下儘可能提高可讀性（和可編輯性）：

$('<img/>').attr({ 
     id: 'button', 
     src: 'button.png' 
    }) 
    .click(function() { 
     alert('clicked'); 
    }) 
    .appendTo('#button-container');

來源

2011-11-02 16:25:05 Blazemonger

你可以使用jQuery.live()其自動掛鉤事件爲您提供：

$(function() { 
    $('#button').live('click', buttonFunction); 
});

然後你只需要做的HTML更新。但是，這隻有在你有多個類似的事件時纔會有幫助，否則你只會在不同的地方使用同樣多的代碼。

來源

2011-11-02 16:00:56

這可能適用於我。我不得不從原地修改#button到隱藏/顯示正確的按鈕，但這並不困難，我認爲整體代碼更加優雅。 – sans

'.delegate（）'在大多數情況下（比如這個）要好得多。 – kapa

$("#button-container").html("<img id='button' src='button.png'>"); 
$("#button").click(buttonFunction);

可以更改爲：

$("#button-container").html("<img id='button' src='button.png'>").find('#button').click(buttonFunction);

但它不是一大堆更優雅。

來源

2011-11-02 16:02:07 Jasper

對，這是一個聲明，但我想沒有一個優雅的解決方法，即.html（）不返回它修改的元素。 – sans

'.html（string）'* does *返回它修改的jQuery對象。但是，它不會返回其內容。 – Blazemonger

你可以做到以下幾點，但是我不知道你在可讀性方面獲益良多：

$("#button-container").append($("<img id='button' src='button.png'>").click(buttonFunction));

例子：http://jsfiddle.net/Ax79h/

來源

2011-11-02 16:03:02 jdavies

編輯以.html（）的元素，並在一個聲明中

回答

相關問題