Question

当选择了选择框中的值时，我尝试调用函数。我也会选择一个默认值，并在页面上显示该值的按钮。

这是我的选择框：

<select id="messagingMode" class="bootstrap-select" >
    <option value="1" selected="selected">Webhooks messaging</option>
    <option value="2">Real time messaging</option>
</select>

这是js：

$('#messagingMode').on('change',showCorrespondingAuthorizationBtn(this));

该功能只是暂时打印所选的值：

function showCorrespondingAuthorizationBtn(select) {
    console.log(select.val());
}

控制台中没有打印任何内容，为什么这不起作用？

Answer 1

尝试直接调用function name而不是function()。在更改功能中默认绑定this

＆＃13;

$('#messagingMode').on('change',showCorrespondingAuthorizationBtn);

function showCorrespondingAuthorizationBtn() {
    console.log($(this).val());
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="messagingMode" class="bootstrap-select">
    <option value="1" selected="selected">Webhooks messaging</option>
    <option value="2">Real time messaging</option>
</select>

＆＃13;

Answer 2

您正在调用该函数，而不是将其作为参考传递。此外，this不是您认为的那种情况。

尝试：

$('#messagingMode').on('change',showCorrespondingAuthorizationBtn);

function showCorrespondingAuthorizationBtn(event) {
  console.log($(this).val());
  // or
  console.log(this.value);
}

Answer 3

使用jQuery事件委派：

 $('#messagingMode').on('change',function(){
    console.log($(this).val());
 });

Here是一个工作小提琴。

Answer 4

$（'＃messagingMode'）。change（function（）{

showCorrespondingAuthorizationBtn（$（本）.VAL（））;

}）;

Answer 5

它不会触发，因为您正在调用事件附件逻辑上的方法。

 // calling the invocation operator () triggers the method
 $('#messagingMode').on('change',showCorrespondingAuthorizationBtn(this));

要解决此问题，请尝试以下代码。

function onDropdownChanged() {
  var sender = $(this); 
  console.log(sender.val());
}

$(document).ready(function() {
    $('#messagingMode').on("change", onDropdownChanged);
})

为什么选择改变方法不起作用？

5 个答案: