Question

是否有任何快速解决方法可以将一个元素的所有事件触发到另一个元素。

＆＃13;

$("#inp-color").change(function(){
  alert($("#inp-color").val());
});
$("#inp-color").on("click", function(){
    alert($("#inp-color").val());
});

//blur, focus == other functios etc

＆＃13;

@media all and (max-width: 767px) {
  .for-des-input {
    display: none;
  }
  .for-mob-input {
    display: block;
  }
}

.for-des-input {
  display: block;
}

.for-mob-input {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="for-des-input" id="inp-color">
<input type="text" class="for-mob-input" id="inp-color-2">

＆＃13;

在此，我想触发.inp-color到.inp-color-2的所有事件。

这可能吗？

目前我正在做的是

$("#inp-color-2").on("click",function(){
  $("#inp-color").trigger("click");
});

$("#inp-color-2").change(function(){
  $("#inp-color").trigger("change");
})

Answer 1

没有安静地提出您的问题，但如果您想要在更改任何输入时触发change事件，请将您的元素包装在div中并执行类似

的操作

$(".all-inputs input[type=text]").change(function(){
  //code goes here if any input changes
});

假设包装器的class为all-inputs

Answer 2

您可以将事件合并为一个on()，并使用处理程序回调中的event.type传递给trigger()

＆＃13;

// set up demo events
 $('div').on({
    mouseenter: function(){
      $(this).addClass('red')
    },
    mouseleave: function(){
      $(this).removeClass('red')
    },
    click:function(){
      $(this).append('<p>Clicked</p>')
    }
 });
 // anything done on first div is also triggered on second 
 $('#div1').on('mouseenter mouseleave click', function(event){
   $('#div2').trigger(event.type)
 })

＆＃13;

div{float:left; width:40%; border:2px solid #ccc}
.red{color:red}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>

＆＃13;

同时触发所有事件

2 个答案: