javascript - 无法调用jquery函数在cakephp 3中工作

Question

我无法调用下面的jquery函数。我没有收到错误，但什么也没有发生。代码位于 cakephp3 mvc 中，其中自动包含 jquery。要调用的 jquery 函数根据 cakephp3 表单元素中给出的地址计算出纬度和经度

  <?php
                    echo $this->Form->input('Tutors.address_street');
                    echo $this->Form->input('Tutors.address_suburb');
                    echo $this->Form->input('Tutors.address_postcode');
                    echo $this->Form->input('Tutors.address_state',array('type' => 'select', 'options' => $auStates, 'default' => 'VIC'));
                    ?>
                    <hr>
                    <?php
                    echo $this->Form->input('Tutors.address_lat',["value"=>0]);
                    echo $this->Form->input('Tutors.address_long',["value"=>0]);
                    ?>

                     <input type="button" value="calculate" id="calculate_address_lat_long" onClick="$(this).calculate_address_lat_long();" />

 /////////////   
<script type="text/javascript">
     $(document).on('click', '#calculate_address_lat_long', function () {
        var address = '';
        address += $('#TutorAddressStreet').val();
        address += ' ' + $('#TutorAddressSuburb').val();
        address += ' ' + $('#TutorAddressPostcode').val();
        address += ' ' + $('#TutorAddressState').val();
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results);
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                $('#TutorAddressLat').val(latitude);
                $('#TutorAddressLong').val(longitude);
                $('#formated_address_lat_long')
                    .html('<div class="alert alert-success">' + results[0].formatted_address + '</div>')
                    .fadeTo(100, 0.1).fadeTo(250, 1)
                    .css({"position": "relative","top": "15px"});
            } else {
                $('#formated_address_lat_long')
                    .fadeTo(100, 0.1).fadeTo(250, 1)
                    .html('<div class="alert alert-error">22Address Not Found</div>')
                    .css({"position": "relative","top": "15px"});
            }
        });
    });
</script>

Answer 1

删除onclick -

<input type="button" value="calculate" id="calculate_address_lat_long" />

或

试试这个

  <?php
                    echo $this->Form->input('Tutors.address_street');
                    echo $this->Form->input('Tutors.address_suburb');
                    echo $this->Form->input('Tutors.address_postcode');
                    echo $this->Form->input('Tutors.address_state',array('type' => 'select', 'options' => $auStates, 'default' => 'VIC'));
                    ?>
                    <hr>
                    <?php
                    echo $this->Form->input('Tutors.address_lat',["value"=>0]);
                    echo $this->Form->input('Tutors.address_long',["value"=>0]);
                    ?>

                     <input type="button" value="calculate" id="calculate_address_lat_long" onClick="calculate_address_lat_long();" />


<script type="text/javascript">
     function calculate_address_lat_long() {
        var address = '';
        address += $('#TutorAddressStreet').val();
        address += ' ' + $('#TutorAddressSuburb').val();
        address += ' ' + $('#TutorAddressPostcode').val();
        address += ' ' + $('#TutorAddressState').val();
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results);
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                $('#TutorAddressLat').val(latitude);
                $('#TutorAddressLong').val(longitude);
                $('#formated_address_lat_long')
                    .html('<div class="alert alert-success">' + results[0].formatted_address + '</div>')
                    .fadeTo(100, 0.1).fadeTo(250, 1)
                    .css({"position": "relative","top": "15px"});
            } else {
                $('#formated_address_lat_long')
                    .fadeTo(100, 0.1).fadeTo(250, 1)
                    .html('<div class="alert alert-error">22Address Not Found</div>')
                    .css({"position": "relative","top": "15px"});
            }
        });
    }
</script>