javascript - 尝试进行 ajax 调用时 TypeError : elem. nodeName 未定义

Question

大家早上好

我知道以前可能有人问过这个问题，但我发现很难找到适合我的情况的解决方案，所以我想我应该在这里问。

我在一个网站上工作，该网站有一个帐户部分，供客户将宠物添加到他们的库存中。表单本身有一个“物种”下拉列表，这反过来会触发“品种”下拉列表的更改事件，以便用特定于所选物种的品种填充它。

但是，如果用户在没有选择品种的情况下过早提交表单，则会显示错误，但品种下拉列表现在未填充，因为触发因素是物种下拉列表的变化。因此，为了解决这个问题，我在 javascript 中添加了一个子句来检测物种下拉列表是否具有加载值，这反过来会触发填充品种框的函数。但是，当重新加载页面并且未填充该框时，我收到上述错误。

这是 jQuery:

jQuery('#species').change(function () {
    var species_id = $(this).val();
    loadBreeds(species_id);
});

if (jQuery('#species').val() != "") {
    var species_id = $(this).val();
    loadBreeds(species_id);
}

function loadBreeds(species_id) {
    console.log('loadBreeds is running');
    jQuery.ajax({
        url: "http://dev.mediaorb.co.uk/hiltonherbs.com/index.php?route=account/breeds",
        type: "post",
        data: "species_id=" + species_id + "&action=populateBreeds",
        success: function (data) {
            console.log('\nSuccess.');
            jQuery('#breed option').remove();
            jQuery('#breed').append('<option value="">-- Please select --</option>');
            if (!data) {
                jQuery('#breed').append('<option value="" disabled="disabled">No breeds found for selected species.</option>');
            } else {
                jQuery('#breed').append(data);
            }
        }
    });
}

这是 HTML 表单的一部分:

    <div class="form-group">
    <label for="species" class="required">Species</label>
    <select class="form-control" id="species" name="species">
        <option value="" selected="selected">-- Please select --</option>
        <option value="1">Dog</option>
        <option value="2" selected="selected">Cat</option>
        <option value="3">Bird</option>
        <option value="4">Horse</option>
    </select>
</div>
<div class="form-group">
    <label for="breed" class="required">Breed</label>
    <select name="breed" id="breed" class="form-control">
        <option selected="selected" value="">-- Please choose a species first --</option>
</div>

我在这里创建了一个 jsfiddle 来说明这个功能:http://jsfiddle.net/1961bgay/

理想情况下，您需要打开控制台(或 Firefox 上的 Firebug )以查看错误何时发生。

我认为这可能与我复制了 jQuery 选择器这一事实有关，但这是检查和添加触发器所必需的...感谢任何帮助，谢谢!

迈克尔

Answer 1

你只是有一个小的 JS 上下文/范围错误:

更改第 9 行:

从这里: var species_id = $(this).val();

为此: var species_id = jQuery('#species').val()

这是您的工作 jsFiddle:http://jsfiddle.net/xgkefvbq/

希望对您有所帮助!