Question

当文档在浏览器中准备就绪时，为什么会运行以下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请求中不包含var Get，那么

奖励积分。在此先感谢您的帮助。

Answer 1

您的代码定义了change处理程序，然后立即触发change事件

/* define change handler*/
$("#b").change(function(){
   /* code to run when changed*/
})    
/* then trigger change event*/
.change();

由于您在定义更改处理程序后立即触发它，因此它将立即运行。如果您不希望发生这种情况，请在结尾处删除.change()

如果<select>未在具有值的选项上设置为selected，则$('#b').val()在首次加载时将为空字符串，从而导致错误的网址

您的<fieldset>未包含在<form>

中也很奇怪

Answer 2

change()事件在加载时触发，因为它是在没有参数的情况下调用的。代码的极简化版本如下所示：

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

这可能令人困惑，因为change()函数充当处理程序或触发器，具体取决于参数的传递方式（请参阅文档here）。

只需删除额外的change()电话即可。

在页面加载时输入触发时jQuery更改事件

2 个答案: