logo标签列表

jQuery在输入框上的change事件在页面加载时触发了。

jqueryhtml
6
以下的JQuery触发事件为什么会在文档准备就绪后在浏览器中运行。我对JQuery很少有经验，所以被卡住了。
    <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<form name="f1" id="f1">Input:
    <input list="br" name="b" id="b">
    <datalist id="br">
        <option value="10">
            <option value="11">
                <option value="12">
                    <option value="100">
                        <option value="101">
    </datalist>
</form>
<br>
<fieldset>
    <legend id="result"></legend>
</fieldset>

<script>
$("#b")
    .change(function () {
    var str = $('#b').val();
    $("#result").text(str);

    $.get("cgi-bin/something.cgi?s=" + str, function (data) {
        $("body")
            .append("Name: " + data.name) 
        .append("Time: " + data.time);
    }, "json");
    alert("Load was performed.");
})
    .change();
</script>

如果您能告诉我为什么“cgi-bin/something.cgi?s=”+ str没有将变量str包含在Get请求中，那就更好了。感谢您提前的帮助。
2个回答
7

change()事件在加载时被触发，因为它没有带参数被调用。你的代码极其简化后看起来像这样：

$("#b").change(function(){ /*do stuff*/ }).change();

这可能会让人感到困惑，因为change()函数根据传递参数的方式而作为处理程序或触发器（参见此处文档）。
只需简单地删除多余的change()调用即可解决问题。
没有比@charlietfl的答案更正确，但由于你先发了帖子，所以我选择了你的回答。非常感谢。 - MattSizzle
4
您的代码定义了一个“change”处理程序，然后立即触发“change”事件。
/* define change handler*/
$("#b").change(function(){
   /* code to run when changed*/
})    
/* then trigger change event*/
.change();

由于您在定义更改处理程序后立即触发它，因此它将立即运行。如果您不想这样做，请删除末尾的.change()

如果未对具有值的选项设置selected, 则在首次加载时$('#b').val()将为空字符串，导致url不正确

同时奇怪的是您的<fieldset>没有包含在<form>中

Josh Stafford因为他第一个发帖而被接受，但是你的答案也是有效的。另一个问题是$.get("cgi-bin/something.cgi?s=" + str, function (data)没有包括str的值，因为目前附加到#result的操作是有效的。 - MattSizzle
实际上，如果看时间的话，我的是第一个...不过没关系。 - charlietfl
糟糕...我刚开始误读了，答案其实是正确的...如果在页面加载时未设置$('#b')为selected，则selected将为空，因此用于url的str也将为空。 - charlietfl
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接