如何修复通过ID在窗体上设置键事件的错误

Question

我想将谷歌地图添加到我的Laravel 8/tailwindcss 2/Alpinejs 2.8应用程序中我找到了一个例子https://laraveldaily.com/laravel-find-addresses-with-coordinates-via-google-maps-api/

由于我不使用jquery，但使用alpinejs，我得到了一个错误：

alpine.js:115 Alpine Error: "TypeError: form_ad_location_edit.on is not a function"

当我尝试重制代码时：

$('form'(.on('key-up-keypress'，函数(e({var keyCode=e.keyCode | | e.which；if(keyCode===13({e.preventDefault((；return false；}})；

进入：

<form action="{{ route('admin.ads.ad_locations.'. ( $isInsert ? 'store' : 'update'), [1, ( $adLocation->id ?? '' ), 1 ] ) }}" method="POST" id="form_ad_location_edit" enctype="multipart/form-data">
let form_ad_location_edit = document.querySelector("#form_ad_location_edit")
console.log('form_ad_location_edit::')
console.log(form_ad_location_edit)
form_ad_location_edit.on('keyup keypress', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});

在控制台中，我看到我得到了有效的表单elemt？

哪种方式有效？

谢谢！

Answer 1

我用addEventListener方法找到了决策：

let form_ad_location_edit = document.querySelector("#form_ad_location_edit")
adLocationLng= parseFloat(adLocationLng)
adLocationLat= parseFloat(adLocationLat)
form_ad_location_edit.addEventListener("keyup keypress", function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});

这对我有用。