無法調用jquery函數在cakephp3中工作

Question

我無法調用下面的jquery函數。我沒有得到一個錯誤，但沒有任何反應。代碼在cakephp3 mvc中，jquery自動包含在其中。 jQuery函數調用作品出來lat和長從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>