jquery 附加复选框，如果选中，它不会返回任何东西？答案

【问题标题】：jquery append with checkbox, if checked, it wont return anything?jquery 附加复选框，如果选中，它不会返回任何东西？
【发布时间】：2012-01-03 04:18:19
【问题描述】：

我使用 AJAx 和 PHP 从数据库中动态生成了葡萄酒类型列表这是函数

function wineTypeHandler(data){
            var Type = data.Type;
            var countType = data.countType;
            for(var i = 0; i < countType; i++){

                $("#selectType").append(

                $("<input />").attr({
                  type: 'checkbox',
                    name: 'Type',
                    class: 'wineTypeCheck',
                     value: Type[i]
                  }), Type[i] + "<br />"
            );
            }   
        }

如您所见，我已将结果“附加”到 id 为 selectType 的某个 div，这一切工作正常，我唯一的问题是当我想根据从该列表中检查的内容更新另一个列表时，它没有回应任何事情！当我尝试这种方法和许多其他方法时

$(document).ready(function(){

$(':checkbox').click(function(){
alert('started');

    // other code
        return true;

});

});

它不会提醒任何东西！谁能帮我解决这个问题。

提前谢谢你。

【问题讨论】：

标签： php jquery dhtml

【解决方案1】：

.click() 将自身附加到创建 DOM 时存在的元素。您的元素是动态生成的，因此 .click() 实际上并没有应用于它们。

您应该使用.live() 来定位动态生成的元素，因为它会将自身附加到在最初加载 DOM 之后创建的任何元素。我还建议使用change 事件而不是click：

$(':checkbox').live('change', function(){
  // No need to return true;
});

【讨论】：

【解决方案2】：

这是因为您在页面加载后但在动态创建复选框之前分配点击功能。
根据您使用的 jQuery 版本，您可以使用 on()（适用于 jQuery 1.7 或更高版本）、delegate()（适用于旧版本的 jquery）或 live()（简单但低效）函数来注册事件到动态创建的元素。

【讨论】：

通过 JavaScript，我想你的意思是 jQuery ;)

【解决方案3】：

试试这个

$(':checkbox').live('change', function(){

});

【讨论】：

【解决方案4】：

您需要在元素添加到 DOM 后绑定 click 事件。这是 JavaScript 开发的一个流行问题。我建议创建一个设置绑定事件的函数，并在追加调用之后调用它（以及在 jQuery(document).ready() 上）。

编辑：我看到很多关于 jQuery.live() 的建议重要的是要注意 jQuery 的 live() 方法已被弃用，不应使用。

【讨论】：

【解决方案5】：

事件仅绑定到现有元素。你需要使用live

$(':checkbox').live("click", function(){
    alert('started');
});

编辑：

从 jQuery 1.7 开始，.live() 方法已被弃用。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应优先使用 .delegate() 而不是 .live()。

jQuery 1.4.3+ 使用delegate

$(#selectType).delegate(':checkbox', "click", function(){
    alert('started');
});

jQuery 1.7+ 使用on

$(#selectType).on("click", ':checkbox', function(){
    alert('started');
});

【讨论】：