无法读取 jquery 选择器元素的 null 属性“parentNode”答案

【问题标题】：Cannot read property 'parentNode' of null of a jquery selector element无法读取 jquery 选择器元素的 null 属性“parentNode”
【发布时间】：2014-12-11 05:54:39
【问题描述】：

我需要为列表创建一个可编辑的组合框，我使用 _ 将模板加载到 js 文件中。在创建一个新的 ComboBox 对象时，我使用 jquery 选择器来选择元素，但我得到了一个无法读取属性 'parentNode' of null 错误。

这里是 Javascript：

var deps = [
'jquery', 'underscore', 'lib/combobox', 'dialogs/FlowNode',
'text!dialogs/choose-feature.html'
];

define(deps, function($, _, combobox, FlowNode, ChooseFeatureTmpl) {

var ChooseFeatureTemplate = _.template(ChooseFeatureTmpl);
    return {
    create: function(transition) {
        var node = FlowNode.create(ChooseFeatureTemplate, transition);
        // add the controls onto the FlowNode for displaying
        // the limiting of features

        $(node).on('render', function() {
            var typecombo = new ComboBox($('input[name="select-type"]'));
            var organism_selector = '#' + node.uid() + ' select[name="select-organism"]';
            var type_selector = '#' + node.uid() + ' input[name="select-type"]';
            var feature_selector = '#' + node.uid() + ' select[name="select-feature"]';


            var changeFn = function() {
                var organism = $.parseJSON(
                    unescape($(organism_selector + ' option:selected').data('organism'))
                );
                var type = $.parseJSON(
                    unescape($(type_selector + ' option:selected').data('type'))
                );

                // clear out the feature select box
                var $featureselect = $(feature_selector);
                $featureselect.empty();


                // refill the feature select box

                $.each(node.data().features, function(id, feature) {
                    if (feature.organism == organism.id && feature.type == type.name) {
                        var $option = $('<option />').text(feature.name + " - " + feature.uniquename)
                            .attr('data-feature', escape(JSON.stringify(feature)));
                        $featureselect.append($option);
                    }
                });
            };

            $(document).on('change', organism_selector, changeFn);
            $(document).on('change', type_selector, changeFn);
        });


        return node;
    }
};

这是与此组合框相关的 html 部分：

<div id="<%= uuid %>" class="center-block">
  <div>
      <label for="select-type">Type</label>
      <input type="text" name="select-type" class="select-type form-control" id="type">
      <span>▼</span>
      <div class="dropdownlist">
      <% _.each(types, function(type, id) { %>
         <option data-type="<%= escape(JSON.stringify(type)) %>"><%= type.name %></option> 
      <% }); %>
      </div>

我的问题是如何使用 jquery 选择器选择输入框，以便返回与其关联的正确标签？

【问题讨论】：

标签： javascript jquery combobox

【解决方案1】：

我没有看到您在代码中尝试访问 parentNode 的位置。无论哪种方式，jQuery 都会返回 jQuery 对象。你要么需要使用 jQuery 的 parent() 函数

$(selector).parent();

或获取实际节点然后调用 parentNode

$(selector).get(0).parentNode

【讨论】：