Question

出于某种原因，在我的jQuery输出中的一个变量之前出现了一个空格。我得到一个JS错误说意外的令牌ILLEGAL。我认为这意味着在某个地方有一个不允许的角色。问题是我无法弄清楚它来自何处。

这是我的jQuery：

$(document).ready(function(){
    $('select').each(function(){

        var selectName = $(this).prop("name");
        var selectOpts = $(this).find("option");
        var selectPar = $(this).parent();

        var hiddenInput = '<input type="hidden" name="'+selectName+'" value="">';

        var menu = '<dv class="jqSelect">' + 
            '<div class="selected" id="'+selectName+'-selected"><div id="'+selectName+'-text">'+$(this).find(":selected").text()+'</div>' + 
            '<div class="caret" onclick="$(\'ul#'+selectName+'-menu\').toggle();"></div>' +
            '<ul id="'+selectName+'-menu">';

        selectOpts.each(function(){

            var optVal = $(this).prop("value");
            var optStr = $(this).text();

            if($(this).is(":selected")){

                $('#'+selectName+'-selected').text(optStr);

            }

            menu += '<li onclick="$(\'#'+selectName+'-text\').text(\''+optStr+'\');$(\'#'+selectName+'-menu\').hide();$(\'input[name="'+selectName+'"]\').prop(\'value\', \''+optVal+'\');">'+optStr+'</li>';

        });

        menu += '</ul></div>';

        selectPar.html(menu + hiddenInput);

        $('ul#'+selectName+'-menu').hide();

    });
});

这是Chrome开发者控制台中发生空间的地方：

<li onclick="$('#category_id-text').text('Tutorials');$('#category_id-menu').hide();$('input[name=" category_id"]').prop('value',="" '7');"="">Tutorials</li>

Answer 1

您提到了引用问题，但主要问题是您在生成的html中有内联事件处理程序。这不是一个好主意。

如果您需要为生成的元素添加操作，请使用

data-nameinlowercase="value"

在元素上，然后使用

分配事件处理程序

$("#container").on("event name","element selector",function() {
  someFunction($(this).data("nameinlowercase"));
});

也将处理未来的元素

在你的情况下

'<div class="caret" data-togglename="ul#'+selectName+'-menu"></div>'

和

$("#caretParentContainerId").on("click",".caret",function() {
  $($(this).data("togglename")).toggle();
});

其中caretParentContainerId是包装.caret元素的容器的ID

Answer 2

问题在于其他双引号内的双引号，如此

<li onclick="something="something more" something else"></li>

如果你想保留你的代码结构，试试这个：

menu += '<li onclick="$(\'#' + selectName + '-text\').text(\'' + optStr + '\');$(\'#' + selectName + '-menu\').hide();$(\'input[name=' + selectName + ']\').prop(\'value\', \'' + optVal + '\');">' + optStr + '</li>';

但我认为你做这样的事情会更好：

menu += '<li onclick="myFunction(' + selectName + ", " + optStr + ", " + optVal + ')">' + optStr + '</li>';

并创建一个这样的函数：

function myFunction(selectName, optStr, optVal) {
        $("#" + selectName + "-text").text(optStr);
        $("#" + selectName + "-menu").hide();
        $("input[name='" + selectName + "']").prop("value", optVal);
    }

这样可以更容易地调试并简化代码。

jQuery意外令牌ILLEGAL

2 个答案: