jQuery onChange事件触发无限次数

r7xajy2e  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(125)

我有一个表单,我试图从数据库中提取数据来计算并在屏幕上动态显示价格。我可以使用jQuery和 AJAX 通过选择字段正确地提取数据,但是当我改变数字输入字段(宽度和高度)中的值时,问题来了,值被正确地保存在变量中,但它使onchange事件无限触发,直到它崩溃。我怎样才能避免这种无限的触发呢?
这是我的html的一部分(刀片,因为我使用Laravel)

<div class="col-md-6 col-sm-6" id="curtainForm">
    <h4>Producto</h4>
    <h6>Modelo</h6>

    <div class="form-row">
        <div class="col-md-12 col-sm-12">
            <select class="form-control " name="model_id" id="model_id">
                <option value="">Selecciona el modelo</option>
                <option value="1">Model</option>
            </select>
        </div>
    </div>
    <br>
    <h6>Cubierta</h6>
    <div class="form-row">
        <div class="col-md-12 col-sm-12">
            <select class="form-control" name="cover_id" id="cover_id" >
                <option value="">Selecciona la cubierta</option>
                <option value="1">Cover</option>
            </select>
        </div>
    </div>

    <br>
    <h6>Datos</h6>
    <div class="form-row">
        <div class="col-md-6 col-sm-6">
            <input type="number" class="form-control" step="0.1" id="width">
        </div>

        <div class="col-md-6 col-sm-6">
            <input type="number" class="form-control" step="0.1" id="height">
        </div>
    </div>
</div>

字符串
这是我的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>


提前致谢

pb3skfrl

pb3skfrl1#

尝试以下脚本-

<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>

字符串

相关问题