Javascript JQuery onChange事件触发无限次

我有一个表单，我试图从数据库中提取数据，计算价格，并在屏幕上动态显示价格。我可以使用JQuery和Ajax以及select字段正确地提取数据，但当我更改数字输入字段（宽度和高度）中的值时，问题就出现了，该值正确地保存在变量中，但它会使onchange事件无限触发，直到它崩溃。我怎样才能避免无限触发

这是我的html的一部分（blade，因为我使用的是Laravel）

产品
摩洛
模式选择
模型


库比尔塔
库比尔塔酒店
掩护


达托斯

这是我的Jquery脚本：

        <script>
            $('#curtainForm').change(function (event) {
                event.preventDefault();
                var model_id = $(this).find('#model_id').val();
                var cover_id = $(this).find('#cover_id').val();
                var width = $(this).find('#width').val();
                var height = $(this).find('#height').val();
                console.log(model_id);
                console.log(cover_id);
                console.log(width);
                console.log(height);
            });
        </script>

$（'#curtainForm'）。更改（函数（事件）{
event.preventDefault（）；
var model_id=$（this）.find（'#model_id'）.val（）；
var cover_id=$（this）.find（'#cover_id'）.val（）；
var width=$（this.find（'#width'）.val（）；
var height=$（this.find（'#height'）.val（）；
console.log（model_id）；
控制台日志（封面id）；
控制台。原木（宽度）；
控制台。原木（高度）；
});

---

提前感谢

尝试以下脚本-

<script >
$('#curtainForm').find('select, input').on('change', function(event) {
    event.preventDefault();
    var $wrapper = $('#curtainForm'),
        model_id = $wrapper.find('#model_id').val(),
        cover_id = $wrapper.find('#cover_id').val(),
        width = $wrapper.find('#width').val(),
        height = $wrapper.find('#height').val(),
        _token = $('input[name="_token"]').val();
        
    console.log('Model: ' + model_id);
    console.log('Cover: ' + cover_id);
    console.log('Width: ' + width);
    console.log('Height: ' + height);
});
</script>

$（'#curtainForm'）。查找（'select，input'）。打开（'change'，函数（事件）{
event.preventDefault（）；
var$wrapper=$（“#curtainForm”），
model_id=$wrapper.find（'#model_id'）.val（），
cover_id=$wrapper.find（'#cover_id'）.val（），
宽度=$wrapper.find（'#width'）.val（），
高度=$wrapper.find（'#height'）.val（），
_令牌=$（'input[name=“_token”]”）。val（）；
console.log（'Model:'+Model_id）；
控制台日志（'Cover:'+Cover_id）；
console.log（'宽度：'+宽度）；
console.log（'高度：'+高度）；
});

为什么要将更改事件侦听器放在包含各种元素的div上？当ajax运行并插入html时，它会反复更改触发ajax的div。让特定的用户交互之类的东西触发事件change@Kinglish

change

事件不是由div触发的，当用户更改元素的值时，它仅由表单控件元素触发（编程更改不会触发所述事件）.我没有添加完整的blade文件，因为它有更多与jquery无关的内容。ajax在第二列的不同div中写入。该函数仅在选择时工作良好，但在数字输入上循环。其思想是，一旦用户更改表单中的数据，另一个div将使用数据库中的数据进行更新。我可以把它改为点击并添加一个按钮，但那不是ideal@PatoFb你能不能添加一个，而不让服务器端混乱。@Teemu我认为应该这样做只要尝试一下，仍然会触发，直到崩溃。这时页面上一定有其他脚本重新触发更改事件。我的剧本写得很好。你可以在这里测试-

<script >
$('#curtainForm').find('select, input').on('change', function(event) {
    event.preventDefault();
    var $wrapper = $('#curtainForm'),
        model_id = $wrapper.find('#model_id').val(),
        cover_id = $wrapper.find('#cover_id').val(),
        width = $wrapper.find('#width').val(),
        height = $wrapper.find('#height').val(),
        _token = $('input[name="_token"]').val();
        
    console.log('Model: ' + model_id);
    console.log('Cover: ' + cover_id);
    console.log('Width: ' + width);
    console.log('Height: ' + height);
});
</script>