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);

但它并不是更优雅。

使用.html（）编辑元素并在一个语句中应用带.click（）的处理程序

4 个答案: