JQuery“属性以”选择器未定义答案

【问题标题】：JQuery "Attribute Starts With" Selector UndefinedJQuery“属性以”选择器未定义
【发布时间】：2014-06-03 07:04:07
【问题描述】：

我有一个模态对话框 (Bootstrap)，其中有一个列表组，其中包含自定义列表组项（在从我的服务器添加数据后使用 append 循环填充）。

在每个列表组项中，我都有一个复选框，用于“选择”结果。在填充项目时，我将 JQuery click 事件连接到相应的复选框：

            // Add to search results
            $('#search-results').append(
            '<a id="centroid-list-item-' + featureAttrs['ObjectID'] + '" href="\\#"' + 'class="list-group-item" style="outline: 0">' +
            '<table style="background: transparent">' +
                '<tr>' +
                    '<td>' +
                        '<input id="centroid-checkbox-' + featureAttrs['ObjectID'] + '" type="checkbox" value="">&nbsp;&nbsp;' +
                    '</td>' +
                    '<td>' +
                        '<h4 class="list-group-item-heading">' +
                            featureAttrs['UNIQUEID'] +
                        '</h4>' +
                        '<p id="centroid-item-text-' + featureAttrs['ObjectID'] + '"' + 'class="list-group-item-text">' +
                            featureAttrs['NAME'] +
                        '</p>' +
                    '</td>' +
                '</tr>' +
            '</table>' +
            '</a>'
            );
            // When the DOM is ready, add event
            $(document).ready(function () {
                $('#centroid-checkbox-' + featureAttrs['ObjectID']).click(function (event) {
                    var objectId = $(this).attr('id').replace(/^\D+/g, '');
                    console.log(objectId + " was clicked");
                    if ($(this).is(':checked')) {
                        // Enable the 'Set Target' button
                        $('#btn-set-target').removeAttr('disabled');
                        // Disable all other choices
                        $('[id^="centroid-checkbox-"]').each(function (event) {
                            console.log("Picked up values for checkboxes");
                            if ($(this).attr('id') != ('centroid-checkbox-' + objectId)) {
                                $(this).attr('disabled', true);
                            }
                        });
                    }
                    else {
                        $('#btn-set-target').attr('disabled', 'disabled');
                        // Enable all text boxes
                        $('[id^="centroid-checkbox-"]').each(function () {
                            if (this.attr('id') !== ('centroid-checkbox-' + objectId)) {
                                this.removeAttr('disabled');
                            }
                        });
                    }
                });
            });

我遇到的问题是，当我调用$('[id^="centroid-checkbox-"]') 时，它返回未定义。但是，在被调用时，大约有 30 个“centroid-checkbox-XXXXX”复选框。我在这里做错了什么？

【问题讨论】：

$ 函数永远不会返回 undefined。
为什么你把 $('#search-results').append( 外部 dom 准备好了？
我猜$(document).ready(function () { 中的包装是没用的。
@dystroy 如果在执行时没有 $('#search-results') 元素会发生什么？如果元素在脚本之后渲染，那会导致错误吗？
不是错误，不会有任何作用。由于它有效（或者 OP 会这么说），我想当 DOM 已经准备好时调用整个代码。但这只是一个猜测。无论如何，代码似乎与您注意到的点不一致。

标签： javascript jquery twitter-bootstrap checkbox jquery-selectors

【解决方案1】：

$ 函数永远不会返回 undefined。

但是你传递给each的回调中的this是一个元素，而不是一个jQuery对象。

这意味着您必须使用this.id 而不是this.attr('id') 和$(this).removeAttr('disabled') 而不是this.removeAttr('disabled')（您可能需要this.disabled=false 或$(this).prop('disabled', false)）。

【讨论】：

@RobG 很好看。事实上，改变属性而不是属性可能不是 OP 想要做的（见编辑）。
感谢@dystroy，仍在努力适应这一点。我认为这是因为我得到“未定义不是函数”，而我的日志中没有得到Picked up values for checkboxes

【解决方案2】：

objectId 永远不会被定义，因为你需要用引号括起你用于 replace() 的正则表达式：

var objectId = $(this).attr('id').replace(/^\D+/g, '');

应该是：

var objectId = $(this).attr('id').replace('/^\D+/g', '');

演示：http://jsfiddle.net/4fUvn/8/

【讨论】：

求助。感谢那。我需要更仔细地阅读内容，并进行更多研究。谢谢！