在一条语句中使用.html()编辑元素并使用.click()应用处理程序

Question

在jQuery中，我经常编写成对的语句来更改按钮及其事件，如：

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

我是不是在一行中错过了一些显而易见/简单的方法，比如：

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

Answer 1

根据jdavies的答案，我喜欢做以下事情来尽可能提高可读性(和可编辑性(：

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

Answer 2

您可以执行以下操作，但我不确定您在可读性方面是否有多大收获：

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

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

Answer 3

您可以使用jQuery.live()为其自动挂接事件：

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

然后你只需要做HTML更新。但是，只有当你有多个类似的事件时，这才有帮助，否则你会在不同的地方有同样多的代码。

Answer 4

$("#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);

但它并没有那么优雅。