2016-08-01 205 views
0

我在HTML页面中有很多选择框,并且我已经使用相同的类名“paperGSM”用于所有选择元素和一个触发选择框元素更改的功能值。JQuery onchange多个元素,但只触发一次

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

每次发生更改事件时,都会触发多次(可能触发所有具有相同类名的元素)。下面的图片解释了这种情况。

PS:我的逻辑,甚至后功能工作正常

因为我不想硬编码的所有元素的事件(如给所有元素不同的类名和硬编码的功能全部),我只希望一个函数适用于所有相同的类元素,但只触发一次。

如果我忽略多个触发器,一切工作正常,它就是这样,那件事很困扰我。

enter image description here

+0

我敢打赌,这是因为每次点击按钮时都会触发onChange。键入12345触发5 onChange事件 – Jay

+0

我认为原因是由于'eventBubbling'。 ('change','.paperGSM',function(event){event.stopPropagation(); //以及其他代码..' –

+0

嘿,停止尝试这个'$('div')。 @The_ehT,这个东西有效,但事件不会触发下一个选择框,因为我想为多个选择框选择一个函数,但它应该只触发一次 –

回答

0

的原因是由于eventBubbling。要停止尝试这个

$('div').on('change', '.paperGSM', function (event){ 
event.stopPropagation(); 
// ...and rest of your codes.. 
} 

注意:删除.off因为一旦该事件被触发时,它会删除监听器。

0

如果有人仍然需要这个, 我找到了一个解决方法这通过使用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