Question

我在HTML页面中有很多选择框，我使用了相同的类名＆＃39; paperGSM ＆＃39;对于所有选择元素和一个在更改选择框元素值时触发的函数。

var getPaperTypeFromGSM = function()
{
    $('div').off().on('change', '.paperGSM', function ()
    {
        console.log($(this).val());
        var url = 'api/getPaperTypeFromGSM';
        var postData = {
            paperGSM: $(this).val()
        };
        var $current = $(this);
        $.post(url, postData, function (result)
        {
            if (result.result == 1) {
                var output = "";
                output += '<option value="0">Select Paper Type</option>';
                for (var i = 0; i <result.paperType.length; i++) {
                    output += '<option value="' + result.paperType[i].paper_type_id + '">' + result.paperType[i].paper_type_name + '</option>';
                }
                $current.siblings('.paperType').prop("disabled", false).html(output);
                getPaperSizeFromPaperType();
            } else {
                Result.error(result);
            }
        }, 'json');
    });
    return false;
};

每次发生更改事件时，它都会触发多次（可能会触发具有相同类名的所有元素）。下图说明了情况。

P.S：我的逻辑甚至帖子功能都运行良好

因为我不想对所有元素的事件进行硬编码（比如为所有元素提供不同的类名和硬编码函数），我只希望一个函数适用于所有相同的类元素但只触发它一次。

如果我忽略了多个触发器，一切都运行良好就是这样，那件事让我烦恼不已。

Answer 1

原因是for( $i = 1; $i < sizeof($array); $i++ ) { if( isset( $array[$i][2] ) ) { $age = $array[$i][2]; // Further use $age as you need it. } }。要停止试试这个

eventBubbling

注意：删除$('div').on('change', '.paperGSM', function (event){ event.stopPropagation(); // ...and rest of your codes.. }，因为一旦触发此事件，它将删除侦听器。

Answer 2

如果有人仍然需要这个，我通过使用onchange event和JQuery找到了一个解决方法：

// The input:
<input class="jscolor" onchange="set_boxes_color(this.jscolor)" value="cc66ff">

// The function:
function set_boxes_color(picker) {
    var elements = $(".p_box");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = '#' + picker;
    }
}

这将更改类p_box

的所有元素的背景颜色

JQuery onchange用于多个元素，但只触发一次

2 个答案: