Question

在这里尝试做一些简单的事情。我是一个初学者，所以这是一个新的。该代码在JSFiddle中工作，但如果我将其保存为.html文件并尝试上传/打开它，则脚本不再有效。

我试图使用Jquery脚本 -

$('#getdata').on('click', function () {
    var formCategory = $('#categories').val();
    var formAddress = $('#address').val();
    var formTown = $('#town').val();
    var formInfo = $('#info').val();

    $('#form_Alert').val('' + formTown + ' |' + formCategory + '| ' + formAddress + ' ' + formInfo);
});

我将其添加到HTML

时的样子

    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
    <html>
<meta charset="utf-8">
<head>
<center><Title>BNN CAD</Title></center>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script language="JavaScript">
$('#getdata').on('click', function () {
    var formCategory = $('#categories').val();
    var formAddress = $('#address').val();
    var formTown = $('#town').val();
    var formInfo = $('#info').val();
 $('#form_Alert').val('' + formTown + ' |' + formCategory + '| ' + formAddress + ' ' + formInfo);
});
</script>
</head>
<body>
</body>
<p>
    <label>Town:</label>
    <select id="town">
        <option>Dundalk</option>
        <option>Edgemere</option>
        <option>Sparrows Point</option>
        <option>Essex</option>
        <option>Middle River</option>
        <option>Cockeysville</option>
        <option>Parkville</option>
        <option>White Marsh</option>
        <option>Woodlawn</option>
        <option>Lansdowne</option>
        <option>Catonsville</option>
        <option>Arbutus</option>
        <option>Monkton</option>
        <option>Sparks</option>
    </select>
    <p>
        <label>Incident Type:</label>
        <select id="categories">
            <option>SHOOTING</option>
            <option>STABBING</option>
            <option>ARMED ROBBERY</option>
            <option>ROBBERY</option>
            <option>SERIOUS ASSAULT</option>
            <option>HOME INVASION</option>
        </select>
    </p>
    <p>
        <label>Address:</label>
        <input type="text" id="address">
    </p>
    <p></p>
    <p>
        <label>Details:</label>
        <input type="text" id="info">
    </p>
    <p>
        <input type="Submit" value="Preview Alert" id="getdata">
    </p>
    <p><b> Alert:</p>
    <textarea id="form_Alert"></textarea>
    </html>

Answer 1

在将目标元素添加到dom之前执行脚本，因此事件处理程序不会添加到元素中。

因此解决方案是在dom ready处理程序中添加事件处理程序注册，如

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script language="JavaScript">
    jQuery(function ($) {
        $('#getdata').on('click', function () {
            var formCategory = $('#categories').val();
            var formAddress = $('#address').val();
            var formTown = $('#town').val();
            var formInfo = $('#info').val();
            $('#form_Alert').val('' + formTown + ' |' + formCategory + '| ' + formAddress + ' ' + formInfo);
        });
    })
</script>

默认情况下，在jsfiddle中，脚本会添加到window.onload处理程序（左侧面板中Frameworks & Extensions下的第二个下拉列表）中，这就是它工作的原因。如果您将其更改为No Wrap - in <head>，那么它也无法在那里工作。

在将Java添加到HTML时遇到问题，我缺少什么？

1 个答案: